@charset "UTF-8";

body {
    line-height: 1;
    text-align: center;
    background-color: #fff !important
}

body.sticky_nav .unlogin_header_cmp {
    z-index: 200;
    position: fixed;
    top: 0;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 0 1px 0 rgba(0, 0, 0, .05);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 0 1px 0 rgba(0, 0, 0, .05);
    -webkit-animation: slideInNav .2s ease-out;
    -moz-animation: slideInNav .2s ease-out;
    animation: slideInNav .2s ease-out
}

body.sticky_nav .unlogin_header_cmp .right .login {
    font-weight: 400;
    color: #0099e5
}

.unlogin_main_body {
    text-align: center
}

.unlogin_main_body .__body {
    margin-top: 72px
}

@media only screen and (max-width: 768px) {
    .unlogin_main_body .__body {
        margin-top: 0
    }
}

.unlogin_main_body .unlogin_header_cmp {
    background: #fff;
    z-index: 200
}

.unlogin_main_body .unlogin_header_cmp #logo_svg {
    fill: #000 !important
}

.unlogin_main_body p {
    font-size: 14px;
    line-height: 1.4em;
    color: #525558
}

.unlogin_main_body h4 {
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility
}

.unlogin_main_body .button {
    cursor: pointer;
    text-align: center;
    position: relative;
    font-weight: 700;
    color: #fff;
    display: inline-block;
    padding: 0 10px;
    height: 50px;
    line-height: 48px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none;
    background-color: #0099e5;
    border: 1px solid #4cc4ff;
    -webkit-box-shadow: 0 1px 0 hsla(0, 0%, 100%, .15) inset;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .15);
    -webkit-transition: background-color .1s ease-in-out;
    -moz-transition: background-color .1s ease-in-out;
    transition: background-color .1s ease-in-out
}

.unlogin_main_body .button .value {
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: inline-block
}

.unlogin_main_body .button:hover {
    background-color: #19b3ff
}

.unlogin_main_body .button.disabled {
    border: 1px solid #bfbfbf;
    background-color: #bfbfbf;
    pointer-events: none
}

.unlogin_main_body .button:focus {
    outline: none;
    -moz-outline: none
}

.unlogin_main_body .button.medium {
    min-width: 180px;
    height: 40px;
    text-align: center;
    line-height: 38px;
    font-size: 16px
}

.unlogin_main_body .button.mini_follow {
    font-size: 12px;
    line-height: 22px;
    height: 24px;
    padding: 0 8px;
    background: 0 0;
    text-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #0099e5;
    font-weight: 400;
    border-color: #0099e5
}

.unlogin_main_body .button.mini_follow:hover {
    background-color: rgba(0, 153, 229, .1)
}

.unlogin_main_body .button.mini_follow:active {
    -webkit-box-shadow: none;
    box-shadow: none
}

.unlogin_main_body .button.mini_follow.disabled {
    color: #bfbfbf;
    border-color: #bfbfbf
}

.unlogin_main_body .slider_main {
    height: 100%
}

.unlogin_main_body .slider_main ._imgMaincmpsuer:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    background-image: url()
}

.unlogin_main_body .split-container {
    margin: 0 auto;
    max-width: 1280px
}

.unlogin_main_body .split-container h2 {
    font-size: 36px;
    margin: 0;
    padding: 60px 0 48px
}

.unlogin_main_body .split-container .split {
    display: "-webkit-" flex;
    display: "-moz-" flex;
    display: "-ms-" flex;
    display: flex
}

.unlogin_main_body .split-container .split>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.unlogin_main_body .split-container .split h3 {
    margin: 24px 0 0;
    font-weight: 400;
    font-size: 22px;
    line-height: 36px;
    white-space: pre
}

.unlogin_main_body .split-container .split h3:before {
    content: attr(text)
}

.unlogin_main_body .split-container .split .button {
    width: 120px;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px
}

.unlogin_main_body .split-container .split .icon {
    background-repeat: no-repeat;
    background-position: 50%;
    height: 70px
}

.unlogin_main_body .split-container .split .publisher .icon {
    background-image: url(https://cdn-uat.500px.me/images/unloginIndex/pen.png)
}

.unlogin_main_body .split-container .split .photographer .icon {
    background-image: url(https://cdn-uat.500px.me/images/unloginIndex/chat.png)
}

.unlogin_main_body .split-container .split .contest .icon {
    background-image: url(https://cdn-uat.500px.me/images/unloginIndex/pig.png)
}

.unlogin_main_body .split-container .split .qianyue .icon {
    background-image: url(https://cdn-uat.500px.me/images/unloginIndex/qianyue.svg)
}

@media only screen and (max-width: 679px) {
    .unlogin_main_body .split-container {
        padding-top: 0
    }

    .unlogin_main_body .split-container h2 {
        font-size: 24px;
        padding-bottom: 0
    }

    .unlogin_main_body .split-container .split {
        display: block
    }

    .unlogin_main_body .split-container .split>div {
        display: flex;
        align-items: center;
        width: 100%;
        margin-top: 32px;
        padding: 0 24px 0 32px
    }

    .unlogin_main_body .split-container .split p {
        font-size: 12px
    }

    .unlogin_main_body .split-container .split h3 {
        font-size: 16px;
        line-height: 22px;
        font-weight: 700;
        margin: 0 0 0 24px;
        text-align: left;
        flex: 1;
        white-space: normal
    }

    .unlogin_main_body .split-container .split h3:before {
        content: attr(text-mobile)
    }

    .unlogin_main_body .split-container .split .button {
        width: 72px;
        height: 30px;
        line-height: 30px;
        font-size: 12px
    }

    .unlogin_main_body .split-container .split .icon {
        width: 48px;
        height: 48px;
        background-size: 100%
    }

    .unlogin_main_body .split-container .split .publisher .icon {
        background-image: url(https://cdn-uat.500px.me/images/unloginIndex/h5/pen.png)
    }

    .unlogin_main_body .split-container .split .photographer .icon {
        background-image: url(https://cdn-uat.500px.me/images/unloginIndex/h5/chat.png)
    }

    .unlogin_main_body .split-container .split .contest .icon {
        background-image: url(https://cdn-uat.500px.me/images/unloginIndex/h5/pig.png)
    }

    .unlogin_main_body .photo_container {
        height: 300px
    }

    .unlogin_main_body .px_top_nav_lnks_main {
        display: none
    }
}

.joinus {
    background: #45457c;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-direction: column
}

.joinus h2 {
    font-size: 36px;
    margin: 0
}

.joinus p {
    font-size: 16px;
    line-height: 24px;
    margin: 8px 0 32px;
    color: #fff
}

.joinus a {
    display: inline-block;
    width: 300px;
    line-height: 64px;
    border-radius: 32px;
    background: #222;
    font-size: 24px;
    color: #222;
    text-align: center;
    font-weight: 700;
    background: #fff;
    transition: .3s
}

.joinus a:hover {
    background: #d7d8db
}

@media only screen and (max-width: 679px) {
    .joinus {
        height: 190px
    }

    .joinus h2 {
        font-size: 24px
    }

    .joinus p {
        font-size: 14px;
        margin: 4px 0 14px
    }

    .joinus a {
        width: 234px;
        line-height: 48px;
        border-radius: 32px;
        font-size: 16px
    }
}

.unlogin_header_cmp {
    position: fixed;
    z-index: 10;
    top: 0;
    width: 100%;
    height: 72px;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s
}

.unlogin_header_cmp .px_top_nav_lnks_main {
    margin-left: 24px;
    float: left;
    height: 100%
}

.unlogin_header_cmp .background {
    z-index: 20;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #222;
    -webkit-box-shadow: rgba(34, 34, 34, .5) 0 0 4px;
    box-shadow: 0 0 4px rgba(34, 34, 34, .5);
    opacity: 1;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    transition: opacity .2s
}

.unlogin_header_cmp .wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30
}

.unlogin_header_cmp .inner {
    max-width: 1280px;
    padding: 0 10px;
    margin: 0 auto;
    height: 72px
}

.unlogin_header_cmp .logo {
    float: left;
    display: flex;
    align-items: center;
    height: 100%;
    width: 87px
}

.unlogin_header_cmp .logo img {
    height: 24px
}

.unlogin_header_cmp .right {
    height: 100%;
    display: flex;
    align-items: center
}

.unlogin_header_cmp .right a {
    font-size: 16px;
    font-weight: 700;
    color: #222
}

.unlogin_header_cmp .right .signup {
    border: 2px solid #222;
    height: 30px;
    line-height: 26px;
    border-radius: 16px;
    width: 94px;
    background: #fff;
    transition: .3s
}

.unlogin_header_cmp .right .signup:hover {
    background: #d7d8db
}

.unlogin_header_cmp .right .login {
    height: 30px;
    margin-right: 32px;
    line-height: 30px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s
}

.unlogin_header_cmp .right .login:hover {
    opacity: .8
}

.unlogin_header_cmp .icon {
    background: transparent url(https://cdn-uat.500px.me/images/message/1x.png?dc=4) 100% 100% no-repeat;
    display: inline-block;
    margin: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    text-align: left;
    cursor: pointer;
    color: #b9c1c7;
    vertical-align: middle
}

@media (-webkit-min-device-pixel-ratio: 1.3),
(min--moz-device-pixel-ratio:1.3),
(min-device-pixel-ratio:1.3),
(min-resolution:1.3dppx) {
    .unlogin_header_cmp .icon {
        background-image: url(https://cdn-uat.500px.me/images/message/2x.png?dc=4);
        background-size: 312px 60px
    }
}

.unlogin_header_cmp .icon.more {
    width: 4px;
    padding: 0;
    margin: -4px 22px 0 0;
    box-sizing: content-box;
    background-position: -250px -40px
}

@media only screen and (max-width: 1280px) {
    .unlogin_header_cmp .inner {
        max-width: 100%;
        padding: 0 64px
    }
}

@media only screen and (max-width: 838px) {
    .unlogin_header_cmp .inner {
        padding: 0 32px
    }
}

@media only screen and (min-width: 1580px) and (max-width:1879px) {
    .unlogin_header_cmp .inner {
        max-width: 1500px
    }
}

@media only screen and (min-width: 1880px) and (max-width:2179px) {
    .unlogin_header_cmp .inner {
        max-width: 1800px
    }
}

@media only screen and (min-width: 2180px) and (max-width:2479px) {
    .unlogin_header_cmp .inner {
        max-width: 2100px
    }
}

@media only screen and (min-width: 2480px) {
    .unlogin_header_cmp .inner {
        max-width: 2400px
    }
}

.px_top_nav_lnks_main {
    display: table
}

.px_top_nav_lnks_main ._ul_ {
    display: table-cell;
    vertical-align: middle;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.25;
    letter-spacing: normal;
    color: #fff
}

.px_top_nav_lnks_main ._ul_ li {
    float: left
}

.px_top_nav_lnks_main ._ul_ li a {
    -webkit-transition: opacity .2s ease-out, color .2s ease-out;
    -moz-transition: opacity .2s ease-out, color .2s ease-out;
    transition: opacity .2s ease-out, color .2s ease-out
}

.px_top_nav_lnks_main ._ul_ li a:hover,
.px_top_nav_lnks_main ._ul_ li a:link,
.px_top_nav_lnks_main ._ul_ li a:visited {
    color: #fff
}

.px_top_nav_lnks_main ._ul_ li .tag {
    display: inline-block;
    padding: 0 2px;
    line-height: 17px;
    border-radius: 2px;
    background: #2986f7;
    font-size: 12px;
    color: #fff;
    transform: scale(.8)
}

.px_top_nav_lnks_main ._ul_ li .tag.danger {
    background: #ff4c4c
}

.px_top_nav_lnks_main ._ul_ li+li {
    padding-left: 25px
}

.px_top_nav_lnks_main ._ul_ li._need_popover {
    position: relative;
    cursor: pointer
}

.px_top_nav_lnks_main ._ul_ li._need_popover .red_mark {
    position: relative
}

.px_top_nav_lnks_main ._ul_ li._need_popover .red_mark:after {
    display: block;
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #ff4c4c;
    position: absolute;
    top: 0;
    left: -6px;
    z-index: 1
}

.px_top_nav_lnks_main ._ul_ li._need_popover svg {
    margin-left: 2px;
    width: 16px;
    vertical-align: middle
}

.px_top_nav_lnks_main ._ul_:after {
    content: " ";
    display: block;
    clear: both;
    height: 0
}

.px_top_nav_lnks_main.bgColorIsWhite ._ul_ {
    color: #000
}

.px_top_nav_lnks_main.bgColorIsWhite ._ul_ li a {
    -webkit-transition: opacity .2s ease-out, color .2s ease-out;
    -moz-transition: opacity .2s ease-out, color .2s ease-out;
    transition: opacity .2s ease-out, color .2s ease-out;
    color: #222
}

.px_top_nav_lnks_main.bgColorIsWhite ._ul_ li a:link,
.px_top_nav_lnks_main.bgColorIsWhite ._ul_ li a:visited {
    color: #222
}

.px_top_nav_lnks_main.bgColorIsWhite ._ul_ li a:hover {
    color: #2986f7
}

.px_top_nav_lnks_main.bgColorIsWhite ._ul_ li a .icon.more {
    background-position: -250px top
}

.px_top_nav_lnks_main.bgColorIsWhite ._need_popover svg path {
    fill: #000
}

.zuopin_popo_m {
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    margin: 5px 0;
    white-space: nowrap
}

.zuopin_popo_m p {
    margin: 0
}

.zuopin_popo_m p a {
    display: block;
    padding: 8px 16px;
    color: #222;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s
}

.zuopin_popo_m p a:hover {
    color: #fff;
    background-color: #0870d1
}

@media (max-width: 1024px) {
    .new_nav {
        display: none !important
    }
}

.download_app_window {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: hsla(0, 0%, 100%, .92);
    z-index: 999;
    display: block
}

.download_app {
    width: 860px;
    height: 516px;
    overflow-y: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1);
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
    background-image: url(https://cdn-uat.500px.me/images/unloginIndex/app-window-bg.png)
}

.download_app .close_btn {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    width: 19px;
    height: 19px;
    font-size: 0;
    border-radius: 3px;
    z-index: 1
}

.download_app .close_btn:hover {
    background-color: rgba(90, 90, 90, .4)
}

.download_app .close_btn:before {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

.download_app .close_btn:after,
.download_app .close_btn:before {
    position: absolute;
    content: ".";
    display: block;
    width: 16px;
    height: 2px;
    top: 8px;
    left: 1.5px;
    background: #fff
}

.download_app .close_btn:after {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg)
}

.download_app .wrapper {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 50px;
    overflow: hidden;
    position: relative
}

.download_app .text_wrap {
    text-align: left;
    margin-left: 380px;
    display: table;
    height: 100%
}

.download_app .text_wrap .center {
    display: table-cell;
    vertical-align: middle
}

.download_app .text_wrap h2,
.download_app .text_wrap h4 {
    color: #fff;
    font-weight: 400;
    line-height: 1.4em;
    margin: 0
}

.download_app .text_wrap h2 {
    font-size: 32px;
    margin-bottom: 23px;
    line-height: 1.2em
}

.download_app .text_wrap h4 {
    font-size: 14px;
    max-width: 300px
}

.download_app .downloads {
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    transition: all .1s ease-out;
    color: #fff;
    text-align: left;
    line-height: 0;
    font-size: 0;
    margin-top: 16px
}

.download_app ._erwenma {
    margin-top: 70px
}

.download_app ._erwenma .app_ma {
    margin-right: 38px
}

.download_app ._erwenma img {
    width: 100px;
    height: 100px
}

.download_app .downloads a {
    display: inline-block;
    margin-right: 38px
}

.download_app .downloads img {
    display: block !important;
    width: auto;
    height: 27px;
    margin-left: 5px
}

.download_app .iphone {
    position: absolute;
    width: 274px;
    height: 547px;
    overflow: visible;
    line-height: 0;
    z-index: 1;
    top: 31px;
    left: 100px;
    right: auto;
    -webkit-transform: translateZ(0) rotateY(26deg);
    -moz-transform: translateZ(0) rotateY(26deg);
    -ms-transform: translateZ(0) rotateY(26deg);
    transform: translateZ(0) rotateY(26deg);
    -moz-perspective: 2200px;
    -ms-perspective: 2200px;
    perspective: 2200px;
    -webkit-perspective: 2200px
}

.download_app .iphone img {
    max-width: 100%
}

.popup-centered {
    left: auto;
    right: auto;
    font-size: 14px;
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 15px
}

.popup-centered ul {
    margin: 0;
    padding: 0
}

.popup-centered .arrow,
.popup-centered .arrow .fill {
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.popup-centered .arrow {
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    -webkit-box-shadow: -3px 3px 3px rgba(0, 0, 0, .04);
    box-shadow: -3px 3px 3px rgba(0, 0, 0, .04);
    margin: 0 0 0 9px;
    border-color: transparent transparent #fff #fff;
    border-style: solid;
    border-width: 6px;
    top: 15px;
    left: 50%
}

.popup-centered .arrow .fill {
    left: 50%;
    margin-left: -7px;
    top: -4px;
    border-color: transparent transparent #f7f8fa;
    border-width: 7px;
    z-index: 920
}

.popup-centered .arrow .fill.blue {
    border-bottom-color: #02adea
}

.popup-centered .contain {
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 2px 25px rgba(0, 0, 0, .2);
    box-shadow: 0 2px 25px rgba(0, 0, 0, .2)
}

.popup-centered .inside {
    height: 100%;
    color: #525558;
    border-right-color: #eeeff2;
    background-color: #fff;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    z-index: auto;
    position: relative;
    width: 100%;
    overflow: hidden
}

.popup-centered a {
    text-align: left;
    transition: 0s;
    -webkit-transition: 0s;
    -ms-transition: 0s;
    -moz-transition: 0s;
    -o-transition: 0s;
    display: block;
    color: #525558;
    padding: 0 16px;
    font-size: 16px;
    line-height: 36px
}

.popup-centered a:hover {
    background-color: #0870d1;
    color: #fff
}

.popup-centered .links {
    max-width: 300px
}

.popup-centered .links ul {
    padding: 8px 0;
    border-top: 1px solid rgba(34, 34, 34, .1)
}

.popup-centered .links ul:first-child {
    border-top: 0
}

.popup-centered .links ul li {
    line-height: 1.8em
}

.popup-centered .new {
    position: relative;
    left: 7px;
    bottom: 2px;
    font-size: 8px;
    line-height: 1.8em;
    text-transform: uppercase;
    color: #222;
    font-weight: 700;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    padding: 1px 3px;
    background-color: #ffd200
}

.popup-centered .icon {
    font-size: 12px;
    padding: 0 4px 0 0;
    position: relative;
    top: 1px
}

.popup-centered .bottom {
    padding: 9px 20px 11px;
    border-top: 1px solid rgba(34, 34, 34, .1);
    background-color: #f7f8fa;
    font-size: 12px;
    line-height: 1.4em;
    color: #9ba2a7;
    max-width: 150px
}

.popup-centered.position_left {
    padding-top: 0
}

.popup-centered.position_left .arrow {
    border-bottom-color: transparent;
    border-left-color: #b9c1c7;
    left: auto;
    right: -20px;
    top: 20px
}

.popup-centered.position_left .arrow .fill {
    border-bottom-color: transparent;
    border-left-color: #f7f8fa;
    border-width: 10px;
    margin-left: -12px;
    top: -10px
}

.popup-centered.noArrow {
    padding-top: 0
}

.show_on_small {
    display: none
}

.red_mark {
    position: relative
}

.red_mark:after {
    display: block;
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #ff4c4c;
    position: absolute;
    top: 26px;
    left: -6px;
    z-index: 1
}

.tag {
    display: inline-block;
    padding: 0 2px;
    line-height: 17px;
    border-radius: 2px;
    background: #2986f7;
    font-size: 12px;
    color: #fff;
    transform: scale(.8)
}

.tag.danger {
    background: #ff4c4c
}

@media (max-width: 1023px) {
    .show_on_small {
        display: initial
    }
}

.hide_on_small {
    display: initial
}

@media (max-width: 1023px) {
    .hide_on_small {
        display: none
    }
}

.main-nav-new .navbar_profile a {
    position: relative
}

.main-nav-new .navbar_profile a .qy_icon {
    background: url(https://cdn-uat.500px.me/images/qianyue/icon_2.svg);
    position: absolute;
    width: 12px;
    left: 28px;
    bottom: 20px;
    height: 12px
}

.main-nav-new .px_topnav__spacer {
    width: 100%
}

.main-nav-new .px_topnav__search_form .query:-ms-input-placeholder,
.main-nav-new .px_topnav__search_form .query::-moz-placeholder,
.main-nav-new .px_topnav__search_form .query::-webkit-input-placeholder {
    color: red
}

.main-nav-new .px_topnav {
    height: 72px;
    line-height: 72px;
    width: 100%;
    padding: 0 30px 0 40px;
    background-color: #fff;
    border-bottom: 1px solid #eeeff2;
    font-size: 14px;
    color: #222;
    overflow: hidden
}

@media (max-width: 767px) {
    .main-nav-new .px_topnav {
        padding: 0
    }
}

.main-nav-new .px_topnav .login {
    padding: 0 20px
}

.main-nav-new .px_topnav .signup {
    background-color: #34bf49;
    color: #fff !important;
    padding: 0 20px
}

.main-nav-new .px_topnav .signup:hover {
    background-color: #41cb56
}

.main-nav-new .px_topnav .px_topnav__wrapper {
    display: flex;
    height: 72px;
    position: relative;
    top: 0;
    font-size: 0;
    -webkit-transition: top .1s ease-out, opacity .1s ease-out;
    -moz-transition: top .1s ease-out, opacity .1s ease-out;
    transition: top .1s ease-out, opacity .1s ease-out;
    flex-direction: row
}

.main-nav-new .px_topnav .icon {
    background: transparent url(https://cdn-uat.500px.me/images/message/1x.png?dc=4) 100% 100% no-repeat;
    display: inline-block;
    margin: 0 8px 0 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    text-align: left;
    cursor: pointer;
    color: #b9c1c7;
    vertical-align: middle
}

.main-nav-new .px_topnav .icon.show_on_small {
    display: none
}

@media (-webkit-min-device-pixel-ratio: 1.3),
(min--moz-device-pixel-ratio:1.3),
(min-device-pixel-ratio:1.3),
(min-resolution:1.3dppx) {
    .main-nav-new .px_topnav .icon {
        background-image: url(https://cdn-uat.500px.me/images/message/2x.png?dc=4);
        background-size: 312px 60px
    }
}

@media (max-width: 1023px) {
    .main-nav-new .px_topnav .icon {
        display: inline-block;
        margin-right: 0
    }

    .main-nav-new .px_topnav .icon.hide_on_small {
        display: none
    }

    .main-nav-new .px_topnav .icon.show_on_small {
        display: inline-block
    }
}

.main-nav-new .px_topnav .icon.discover {
    background-position: -27px top
}

.main-nav-new .px_topnav .icon.quests {
    width: 20px;
    background-position: -50px top
}

.main-nav-new .px_topnav .icon.directory {
    width: 24px;
    background-position: -288px top
}

.main-nav-new .px_topnav .icon.upload {
    width: 24px;
    background-position: -168px top
}

.main-nav-new .px_topnav .icon.bell {
    background-position: -218px top;
    margin-left: 2px;
    margin-right: 2px
}

.main-nav-new .px_topnav .icon.more {
    width: 4px;
    margin-left: 10px;
    margin-right: 10px;
    background-position: -250px top
}

.main-nav-new .px_topnav .icon.search {
    background-position: -267px top
}

.main-nav-new .px_topnav .icon.numbers {
    margin-right: 0;
    -webkit-transition: top .1s ease-out, opacity .1s ease-out;
    -moz-transition: top .1s ease-out, opacity .1s ease-out;
    transition: top .1s ease-out, opacity .1s ease-out;
    background-color: #ff4c4c;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: auto;
    min-width: 24px;
    height: 22px;
    line-height: 22px;
    background-image: none;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    -webkit-border-radius: 11px;
    border-radius: 11px
}

.main-nav-new .px_topnav .icon.numbers+.icon,
.main-nav-new .px_topnav .icon.numbers:empty {
    display: none
}

.main-nav-new .px_topnav .icon.numbers:empty+.icon {
    display: inline-block
}

.main-nav-new .px_topnav .icon.avatar {
    width: 25px;
    height: 25px
}

.main-nav-new .px_topnav .px_topnav__nav_content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
    height: 72px;
    padding: 0 10px;
    color: #525558;
    font-weight: 400;
    letter-spacing: .025em;
    white-space: nowrap;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none
}

.main-nav-new .px_topnav .px_topnav__search_form {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center
}

.main-nav-new .px_topnav .px_topnav__search_form form {
    position: relative;
    width: 100%;
    max-width: 300px
}

.main-nav-new .px_topnav .px_topnav__search_form .submit {
    position: absolute;
    top: 27px;
    left: 24px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    height: 20px;
    width: 20px;
    border: none;
    background-color: transparent;
    background-position: -100px top;
    overflow: hidden;
    text-indent: 30px;
    cursor: pointer;
    pointer-events: none
}

.main-nav-new .px_topnav .px_topnav__search_form .query {
    width: 100%;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    background: #f7f8fa;
    font-weight: 400;
    font-size: 16px;
    color: #222;
    text-indent: 28px;
    border: 1px solid #eeeff2;
    line-height: 22px
}

.main-nav-new .px_topnav .px_topnav__search_form .query:focus {
    background-color: #fff;
    border-color: #0099e5
}

.main-nav-new .px_topnav .px_topnav__search_form .query:-ms-input-placeholder,
.main-nav-new .px_topnav .px_topnav__search_form .query::-moz-placeholder,
.main-nav-new .px_topnav .px_topnav__search_form .query::-webkit-input-placeholder {
    color: #71767a;
    line-height: 40px
}

.main-nav-new .px_topnav svg:not(:root) {
    overflow: hidden
}

.main-nav-new .px_topnav a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 72px;
    padding: 0 14px;
    font-size: 16px;
    color: #525558;
    font-weight: 400;
    letter-spacing: .025em;
    white-space: nowrap;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none
}

.main-nav-new .px_topnav a:hover .icon.home {
    background-position: 0
}

.main-nav-new .px_topnav a:hover .icon.discover {
    background-position: -27px
}

.main-nav-new .px_topnav a:hover .icon.upload {
    background-position: -168px
}

.main-nav-new .px_topnav a:hover .icon.cart {
    background-position: -144px
}

.main-nav-new .px_topnav a:hover .icon.gallery {
    background-position: -194px
}

.main-nav-new .px_topnav a:hover .icon.bell {
    background-position: -218px
}

.main-nav-new .px_topnav a:hover .icon.more {
    background-position: -250px
}

.main-nav-new .px_topnav a:hover .icon.search {
    background-position: -267px
}

.main-nav-new .px_topnav a:hover .icon.quests {
    background-position: -50px
}

.main-nav-new .px_topnav a:hover .icon.local_listings {
    background-position: -72px
}

.main-nav-new .px_topnav a:hover .icon.directory {
    background-position: -288px
}

.main-nav-new .px_topnav a .down_arrow {
    width: 16px;
    height: 16px;
    transform-origin: center;
    transition-duration: .2s
}

.main-nav-new .px_topnav li {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 72px;
    vertical-align: top;
    font-size: 16px;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none
}

.main-nav-new .px_topnav li.show_on_small {
    display: none
}

@media (max-width: 767px) {
    .main-nav-new .px_topnav li.hide_on_small {
        display: none
    }

    .main-nav-new .px_topnav li.show_on_small {
        display: table-cell
    }
}

.main-nav-new .px_topnav li.active a {
    background-color: #f7f8fa
}

.main-nav-new .px_topnav li.active #user_upload_new {
    background: #222;
    color: #fff
}

.main-nav-new .px_topnav li.active #user_upload_new .upload_icon_new {
    background-image: url(https://cdn-uat.500px.me/images/svg/up_arrow_w.svg)
}

.main-nav-new .px_topnav li:hover a {
    color: #0099e5;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none
}

.main-nav-new .px_topnav li:hover a .down_arrow {
    transform: rotate(180deg)
}

.main-nav-new .px_topnav li.px_topnav__logo_container .px_topnav__logo {
    width: 92px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.main-nav-new .px_topnav li.px_topnav__logo_container .px_topnav__logo img {
    width: 100%;
    margin: 0
}

.main-nav-new .px_topnav li.px_topnav__logo_container .px_topnav__logo path {
    -webkit-transition: fill .2s ease-out;
    -moz-transition: fill .2s ease-out;
    transition: fill .2s ease-out
}

.main-nav-new .px_topnav li.px_topnav__logo_container .px_topnav__logo:hover path {
    fill: #0099e5
}

.main-nav-new .px_topnav #user_upload_new {
    width: 96px;
    height: 42px;
    border-radius: 23px;
    border: 2px solid #222;
    background: #fff;
    color: #222;
    font-weight: 700;
    line-height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px 0 11px
}

.main-nav-new .px_topnav #user_upload_new .upload_icon_new {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(https://cdn-uat.500px.me/images/svg/up_arrow.svg);
    margin: 0 7px 0 0
}

.main-nav-new .px_topnav #user_upload_new:hover {
    background: rgba(34, 34, 34, .2);
    color: #222
}

#px_topnav_user {
    max-width: 180px;
    text-overflow: ellipsis
}

#px_topnav_user .avatar {
    background-image: none;
    position: relative;
    text-overflow: ellipsis;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%
}

#px_topnav_user .username {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media (max-width: 767px) {
    .main-nav-new .navbar_profile a {
        position: relative
    }

    .main-nav-new .navbar_profile a .qy_icon {
        width: 12px;
        left: 25px;
        bottom: 10px;
        height: 12px
    }

    .main-nav-new .px_topnav {
        height: 50px;
        line-height: 50px
    }

    .main-nav-new .px_topnav .px_topnav__nav_content,
    .main-nav-new .px_topnav .px_topnav__wrapper {
        height: 50px
    }

    .main-nav-new .px_topnav a {
        height: 50px;
        padding: 0 10px
    }

    .main-nav-new .px_topnav li {
        line-height: 50px
    }

    .main-nav-new .px_topnav li.px_topnav__logo_container .px_topnav__logo {
        width: 82px
    }

    .main-nav-new .px_topnav li.px_topnav__logo_container .px_topnav__logo img {
        margin: 0
    }
}

.main-nav-new .px_topnav__wrapper .Copyright {
    position: relative
}

.main-nav-new .px_topnav__wrapper .Copyright .__new {
    position: absolute;
    top: 4px;
    right: -15px;
    display: inline-block;
    width: 30px;
    height: 15px;
    background-size: 29px 13px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url(https://cdn-uat.500px.me/images/discover/icon-new.svg)
}

@media (max-width: 1200px) {
    .new_tag {
        display: none !important
    }
}

.pxLightbox_window {
    z-index: 2001;
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: none;
    text-align: center;
    opacity: 0;
    transition: opacity .4s ease-in-out;
    -webkit-transition: opacity .4s ease-in-out;
    -ms-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    perspective: 1000;
    -webkit-perspective: 1000;
    -ms-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000
}

.pxLightbox_window .pxLightbox_container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.pxLightbox_window .pxLightbox_container .pxLightbox_background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 999999px;
    background-color: #fff;
    opacity: .95
}

.pxLightbox_window .pxLightbox_container .pxLightboxHtml {
    position: relative;
    display: block;
    margin: 0 auto;
    top: 50%;
    height: 0;
    width: 0;
    -webkit-transition: -webkit-transform .4s ease-in-out;
    -moz-transition: -moz-transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transform: scale(.9);
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    -moz-transform: scale(.9);
    -o-transform: scale(.9);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    perspective: 1000;
    -webkit-perspective: 1000;
    -ms-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    text-align: left
}

.pxLightbox_window .pxLightbox_container .pxLightboxHtml>* {
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 2px 25px rgba(0, 0, 0, .2);
    box-shadow: 0 2px 25px rgba(0, 0, 0, .2)
}

.pxLightbox_window .pxLightbox_container .pxLightboxHtml .modal_content {
    overflow-y: auto;
    width: 100%;
    height: 100%;
    position: absolute;
    border: 1px solid hsla(0, 0%, 54.9%, .4);
    border-radius: 3px;
    background-color: #f7f8fa;
    margin: 0 auto;
    opacity: 1
}

.pxLightbox_window .pxLightbox_container .pxLightboxHtml .modal_content .top-bar {
    background-color: #f7f8fa;
    padding: 10px 15px;
    border-bottom: 1px solid #b9c1c7
}

.pxLightbox_window .pxLightbox_container .pxLightboxHtml .modal_content .top-bar h3 {
    display: inline-block;
    margin: 5px 0
}

.pxLightbox_window .pxLightbox_container .pxLightboxHtml .modal_content .modal-footer {
    background-color: #f7f8fa;
    padding: 10px 15px;
    border-top: 1px solid rgba(34, 34, 34, .1);
    position: absolute;
    width: 100%;
    bottom: 0
}

.pxLightbox_window .pxLightbox_container .pxLightboxHtml .modal_content .modal-footer .right .button {
    padding: 0 28px
}

.pxLightbox_window .pxLightbox_container .pxLightboxHtml .modal_content .modal-footer .right .button+.button {
    margin-left: 10px
}

.pxLightbox_window .pxLightbox_container .pxLightboxHtml .modal_content.noborder {
    border: 0
}

.pxLightbox_window .pxLightbox_container .pxLightboxHtml .commonHead {
    border-radius: 1px 1px 0 0;
    background-color: #fff;
    height: 45px;
    padding: 0 10px;
    line-height: 44px;
    position: relative;
    border-bottom: 1px solid rgba(34, 34, 34, .1)
}

.pxLightbox_window .pxLightbox_container .pxLightboxHtml .commonHead h3 {
    display: block;
    float: left;
    color: #71767a;
    margin: 0
}

.pxLightbox_window .pxLightbox_container .pxLightboxHtml .commonHead .close {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    right: 10px;
    width: 20px;
    height: 20px;
    color: #71767a;
    line-height: 16px;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s
}

.pxLightbox_window .pxLightbox_container .pxLightboxHtml.full-screen {
    margin: 0;
    top: 0;
    height: 100%;
    width: 100%
}

.pxLightbox_window .pxLightbox_container .pxLightboxHtml.full-screen .close {
    display: block
}

.pxLightbox_window .pxLightbox_container .pxLightboxHtml.full-screen .full_screen_modal_content {
    cursor: -webkit-zoom-out;
    box-shadow: none;
    -webkit-box-shadow: none;
    border: none;
    background: none;
    position: absolute;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-color: #f7f8fa;
    margin: 0 auto;
    opacity: 1
}

.pxLightbox_window .pxLightbox_container .pxLightboxHtml.full-screen .full_screen_modal_content .main_container {
    margin: 20px;
    -webkit-box-shadow: 0 2px 80px rgba(0, 0, 0, .1);
    box-shadow: 0 2px 80px rgba(0, 0, 0, .1);
    overflow: hidden
}

.pxLightbox_window .pxLightbox_container .pxLightboxHtml.full-screen .full_screen_modal_content .main_container .photo_sidebar {
    border: none;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .15);
    box-shadow: 0 0 1px rgba(0, 0, 0, .15)
}

.pxLightbox_window .pxLightbox_container .pxLightboxHtml.full-screen .full_screen_modal_content .main_container .photo_container {
    border-bottom: none
}

html.pxLightbox .pxLightbox_window {
    display: block
}

.pxLightbox_window.show {
    opacity: 1;
    transform: scale(1)
}

.pxLightbox_window.show .pxLightbox_container .pxLightboxHtml {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1)
}

.pxLightbox_window.full-screen-main {
    z-index: 888
}

.pxLightbox_window.full-screen-main .pxLightbox_container .pxLightbox_background {
    background-color: #fff
}

.pxLightbox_window.bg_gray .pxLightbox_container .pxLightbox_background {
    background-color: #7b7c7d
}

.pxLightbox_window.bg_gray .pxLightbox_container .pxLightboxHtml>div {
    -webkit-border-radius: 10px;
    border-radius: 10px
}

.pxLightbox_window.bg_gray .pxLightbox_container .pxLightboxHtml .modal_content {
    background-color: #eef1f4
}

.bottom_container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid #cdced2
}

.bottom_container .btn {
    font-size: 17px;
    color: #0076ff;
    text-align: center;
    display: inline-block;
    width: 49%;
    height: 44px;
    line-height: 44px;
    vertical-align: top;
    cursor: pointer
}

.bottom_container .cancel {
    border-right: 1px solid #cdced2
}

.chushi_win {
    height: 100%
}

.chushi_win .upload_closeable {
    position: relative;
    cursor: pointer;
    width: 27px;
    height: 27px;
    font-size: 0;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
    position: absolute;
    top: 10px;
    right: 15px
}

.chushi_win .upload_closeable:hover {
    background-color: rgba(90, 90, 90, .3)
}

.chushi_win .upload_closeable:before {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

.chushi_win .upload_closeable:after,
.chushi_win .upload_closeable:before {
    position: absolute;
    content: ".";
    display: block;
    width: 24px;
    height: 2px;
    top: 12px;
    left: 1.5px;
    background: #5a5a5a
}

.chushi_win .upload_closeable:after {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg)
}

.chushi_win ._header {
    height: 100px;
    line-height: 100px;
    font-size: 24px;
    text-align: center;
    color: #0099e5;
    border-bottom: 1px solid #eeeff2
}

.chushi_win ._body {
    height: calc(100% - 150px);
    height: -webkit-calc(100% - 150px);
    height: -moz-calc(100% - 150px);
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex
}

.chushi_win ._body>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 6% 10%
}

.chushi_win ._body>div ._text {
    font-size: 13px;
    line-height: 1.85;
    text-align: center;
    color: #525558
}

.chushi_win ._body>div ._b {
    text-align: center
}

.chushi_win ._body>div ._b .button {
    margin-top: 25px;
    font-size: 14px;
    width: 100px;
    height: 35px;
    line-height: 35px
}

.chushi_win ._footer {
    border-top: 1px solid #eeeff2;
    height: 50px;
    position: relative
}

.chushi_win ._footer .cmp {
    position: absolute;
    right: 28px;
    top: 30%
}

.chushi_win ._footer .cmp span {
    vertical-align: middle
}

.chushi_win ._footer .cmp ._checkbox {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    border: 1px solid rgba(185, 193, 199, .5);
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, .1);
    cursor: pointer;
    background-color: #fff;
    display: inline-block
}

.chushi_win ._footer .cmp ._checkbox:before {
    opacity: 0;
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-image: url(https://cdn-uat.500px.me/images/icon/duihao_500px.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    -webkit-background-size: 8px;
    background-size: 8px;
    -webkit-transform: scale(.95);
    -moz-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    transition: opacity .2s
}

.chushi_win ._footer .cmp ._checkbox.checked:before {
    opacity: 1;
    animation: pulse_large .4s ease-in-out 0s forwards
}

.chushi_win ._footer .cmp ._text {
    font-size: 12px;
    color: #71767a
}

.dialogbox_main_cmp {
    height: 100%;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1200
}

.dialog-box {
    font: 400 14px "\5FAE\8F6F\96C5\9ED1";
    height: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -90px;
    margin-left: -150px;
    z-index: 1
}

.dialog-box .normal {
    background: #fff
}

.dialog-box .dialog-btn {
    padding: 0 20px 20px;
    text-align: center
}

.dialog-box .dialog-btn span {
    width: 90px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 3px;
    padding: 0 15px;
    margin: 0 10px
}

.dialog-box-close,
.dialog-btn span {
    display: inline-block;
    cursor: pointer
}

.dialog-box-container {
    position: relative;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: 0 0 10px #bbb
}

.dialog-box-title {
    color: #333;
    height: 36px;
    line-height: 36px;
    padding: 0 15px
}

.dialog-box-title h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    float: left
}

.dialog-box-close {
    font-size: 26px;
    margin-left: 20px;
    font-weight: 400;
    float: right
}

.dialog-box-close:hover {
    color: #0099e5
}

.dialog-box-content {
    text-align: center;
    padding: 20px;
    line-height: 24px;
    margin: 0 auto
}

.dialog-btn-cancel {
    background: #ddd
}

.dialog-btn-cancel:hover {
    background: #d6d6d6
}

.dialog-btn-warning {
    background: #33c
}

.dialog-btn-warning:hover {
    background: #55d168
}

.dialog-btn-ok {
    color: #fff;
    border: 1px solid #0099e5
}

.dialog-btn-ok,
.dialog-btn-ok:hover {
    background: #0099e5
}

#dialog-box-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .3;
    filter: alpha(opacity=30);
    background: #000;
    height: 2506px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s
}

#dialog-box-iframe body {
    margin: 0;
    padding: 0;
    border: 0
}

.effect-fade .dialog-box-container {
    -webkit-transform: scale(.6);
    -ms-transform: scale(.6);
    transform: scale(.6);
    opacity: 0;
    transition: all .3s
}

.show.effect-fade .dialog-box-container {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1
}

.effect-newspaper .dialog-box-container {
    -webkit-transform: scale(0) rotate(2turn);
    -ms-transform: scale(0) rotate(2turn);
    transform: scale(0) rotate(2turn);
    opacity: 0;
    -webkit-transition: all .3s;
    transition: all .3s
}

.show.effect-newspaper .dialog-box-container {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
    opacity: 1
}

.effect-fall {
    -webkit-perspective: 1300px;
    perspective: 1300px
}

.effect-fall .dialog-box-container {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(600px) rotateX(20deg);
    -ms-transform: translateZ(600px) rotateX(20deg);
    transform: translateZ(600px) rotateX(20deg);
    opacity: 0
}

.show.effect-fall .dialog-box-container {
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in;
    -webkit-transform: translateZ(0) rotateX(0);
    -ms-transform: translateZ(0) rotateX(0);
    transform: translateZ(0) rotateX(0);
    opacity: 1
}

.effect-scaled .dialog-box-container {
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    opacity: 0;
    -webkit-transition: all .3s;
    transition: all .3s
}

.show.effect-scaled .dialog-box-container {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1
}

.effect-flip-horizontal {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px
}

.effect-flip-horizontal .dialog-box-container {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(-70deg);
    -ms-transform: rotateY(-70deg);
    transform: rotateY(-70deg);
    -webkit-transition: all .3s;
    transition: all .3s;
    opacity: 0
}

.show.effect-flip-horizontal .dialog-box-container {
    -webkit-transform: rotateY(0);
    -ms-transform: rotateY(0);
    transform: rotateY(0);
    opacity: 1
}

.effect-flip-vertical {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px
}

.effect-flip-vertical .dialog-box-container {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-70deg);
    -ms-transform: rotateX(-70deg);
    transform: rotateX(-70deg);
    -webkit-transition: all .3s;
    transition: all .3s;
    opacity: 0
}

.show.effect-flip-vertical .dialog-box-container {
    -webkit-transform: rotateX(0);
    -ms-transform: rotateX(0);
    transform: rotateX(0);
    opacity: 1
}

.effect-sign {
    -webkit-perspective: 1300px;
    perspective: 1300px
}

.effect-sign .dialog-box-container {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-60deg);
    -ms-transform: rotateX(-60deg);
    transform: rotateX(-60deg);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    opacity: 0;
    -webkit-transition: all .3s;
    transition: all .3s
}

.show.effect-sign .dialog-box-container {
    -webkit-transform: rotateX(0);
    -ms-transform: rotateX(0);
    transform: rotateX(0);
    opacity: 1
}

.dialog-foot {
    position: absolute;
    bottom: 0;
    padding: 20px
}

.dialogbox_main_cmp._v2 {
    color: #222
}

.dialogbox_main_cmp._v2 .button {
    cursor: pointer;
    text-align: center;
    position: relative;
    font-weight: 700;
    color: #fff;
    display: inline-block;
    height: 50px;
    line-height: 48px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none;
    background-color: #0870d1;
    border: 1px solid #47a3f8;
    -webkit-box-shadow: 0 1px 0 hsla(0, 0%, 100%, .15) inset;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .15);
    -webkit-transition: background-color .1s ease-in-out;
    -moz-transition: background-color .1s ease-in-out;
    transition: background-color .1s ease-in-out;
    height: 48px;
    padding: 14px 30px;
    line-height: 22px;
    border-radius: 28px
}

.dialogbox_main_cmp._v2 .button .value {
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: inline-block
}

.dialogbox_main_cmp._v2 .button:hover {
    background-color: #168af6
}

.dialogbox_main_cmp._v2 .button.disabled {
    border: 1px solid #b9b9b9;
    background-color: #b9b9b9;
    pointer-events: none
}

.dialogbox_main_cmp._v2 .button:focus {
    outline: none;
    -moz-outline: none
}

.dialogbox_main_cmp._v2 .button.medium {
    min-width: 180px;
    height: 40px;
    text-align: center;
    line-height: 38px;
    font-size: 16px
}

.dialogbox_main_cmp._v2 .button.mini_follow {
    font-size: 12px;
    line-height: 22px;
    height: 24px;
    padding: 0 8px;
    background: 0 0;
    text-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #0870d1;
    font-weight: 400;
    border-color: #0870d1
}

.dialogbox_main_cmp._v2 .button.mini_follow:hover {
    background-color: rgba(0, 153, 229, .1)
}

.dialogbox_main_cmp._v2 .button.mini_follow:active {
    -webkit-box-shadow: none;
    box-shadow: none
}

.dialogbox_main_cmp._v2 .button.mini_follow.disabled {
    color: #bfbfbf;
    border-color: #bfbfbf
}

.dialogbox_main_cmp._v2 .button.ghost {
    background-color: #fff;
    color: #0870d1;
    border: 1px solid #fff
}

.dialogbox_main_cmp._v2 .dialog-box-container {
    padding: 24px
}

.dialogbox_main_cmp._v2 ._icon,
.dialogbox_main_cmp._v2 .dialog-btn-v2 .dialog-btn-wrapper {
    display: flex;
    align-items: center;
    justify-content: center
}

.dialogbox_main_cmp._v2 ._title {
    font-weight: 700;
    font-size: 21px
}

.dialogbox_main_cmp._v2 ._desc {
    margin-top: 16px;
    font-weight: 400;
    font-size: 16px
}

.dialogbox_main_cmp._v2 .dialog-btn-v2 .dialog-btn-wrapper+.dialog-btn-wrapper {
    margin-top: 0
}

@-webkit-keyframes animate_infinity {
    0% {
        background-position: center 0
    }

    to {
        background-position: center -960px
    }
}

@-moz-keyframes animate_infinity {
    0% {
        background-position: center 0
    }

    to {
        background-position: center -960px
    }
}

@-ms-keyframes animate_infinity {
    0% {
        background-position: center 0
    }

    to {
        background-position: center -960px
    }
}

@keyframes animate_infinity {
    0% {
        background-position: center 0
    }

    to {
        background-position: center -960px
    }
}

.infinite_scroll_loader {
    cursor: pointer
}

.infinite_scroll_loader .bg {
    background-color: #edeef1;
    height: 40px;
    text-align: center
}

.infinite_scroll_loader .bg .lyby_500px_load {
    display: inline-block;
    margin: 12px 0;
    width: 32px;
    height: 16px;
    background: url(//500px.me/images/loading-500.png) top no-repeat;
    -webkit-animation: animate_infinity 2s steps(60) infinite;
    -moz-animation: animate_infinity 2s steps(60) infinite;
    -ms-animation: animate_infinity 2s steps(60) infinite;
    animation: animate_infinity 2s steps(60) infinite
}

.checkbox-container-lxx .cate-txt {
    color: #525558;
    font-size: 14px;
    flex: 1
}

.checkbox-container-lxx .check-per.flexbox {
    display: "-webkit-" flex;
    display: "-moz-" flex;
    display: "-ms-" flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center
}

.checkbox-container-lxx .check-per.flexbox .checkbox-cate {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    border: 1px solid rgba(185, 193, 199, .5);
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, .1);
    cursor: pointer;
    background-color: #fff;
    display: inline-block
}

.checkbox-container-lxx .check-per.flexbox .checkbox-cate:before {
    opacity: 0;
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-image: url();
    background-position: 50%;
    background-repeat: no-repeat;
    -webkit-background-size: 15px;
    background-size: 15px;
    -webkit-transform: scale(.95);
    -moz-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    transition: opacity .2s
}

.checkbox-container-lxx .check-per.flexbox .checkbox-cate.checked:before {
    opacity: 1;
    animation: pulse_large .4s ease-in-out 0s forwards
}

.checkbox-container-lxx .check-per.flexbox .checkbox-cate.error {
    border-color: #ff3442
}

.yaoyue_caogao_win {
    height: calc(100% - 45px);
    height: -webkit-calc(100% - 45px);
    height: -moz-calc(100% - 45px);
    overflow-y: auto
}

.yaoyue_caogao_win:before {
    display: table;
    content: ""
}

.yaoyue_caogao_win h1 {
    text-align: center;
    margin-top: 80px;
    font-weight: 400;
    font-size: 24px;
    color: #0099e5
}

.yaoyue_caogao_win .__descc {
    color: #71767a;
    text-align: center;
    font-size: 14px
}

.yaoyue_caogao_win .___bodyy {
    margin-top: 50px;
    padding: 0 20px
}

.yaoyue_caogao_win ._yyCGtitle {
    text-align: left;
    padding-left: 20px;
    color: #525558;
    font-size: 16px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    padding-right: 100px
}

.yaoyue_caogao_win .__yyCGtype {
    text-align: left;
    padding-left: 20px;
    margin-top: 5px;
    color: #71767a;
    font-size: 14px
}

.yaoyue_caogao_win ._countIcon {
    display: inline-block;
    position: absolute;
    text-align: center;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    color: #fff;
    font-size: 18px;
    background-color: #71767a;
    border-radius: 50%
}

.yaoyue_caogao_win .sets_body {
    position: relative;
    padding-top: 30px;
    margin: 0 auto
}

.yaoyue_caogao_win .profile_body .sets_body .empty_view {
    background-image: url(//assetcdn.500px.org/assets/profiles/set-e4b94e65746a353d9a4a2182fa79f8a4.svg)
}

.yaoyue_caogao_win .px_card {
    position: relative;
    width: 280px;
    display: inline-block;
    vertical-align: top;
    background-color: #fff;
    transition: all .2s
}

.yaoyue_caogao_win .px_card,
.yaoyue_caogao_win .px_card .avatar,
.yaoyue_caogao_win .px_card .name,
.yaoyue_caogao_win .px_card .top {
    -webkit-transition: all .2s;
    -moz-transition: all .2s
}

.yaoyue_caogao_win .px_card .avatar,
.yaoyue_caogao_win .px_card .top {
    background-position: 50%
}

.yaoyue_caogao_win .px_card:hover {
    -webkit-box-shadow: 0 1px 15px rgba(0, 0, 0, .08);
    box-shadow: 0 1px 15px rgba(0, 0, 0, .08)
}

.yaoyue_caogao_win .px_card.small {
    width: 280px;
    margin: 0 10px 20px
}

.yaoyue_caogao_win .px_card.medium {
    width: 360px;
    margin: 0 25px 50px
}

.yaoyue_caogao_win .px_card.medium .top {
    height: 240px
}

.yaoyue_caogao_win .px_card.medium .bottom {
    position: relative;
    height: 110px;
    padding-top: 35px
}

.yaoyue_caogao_win .px_card.no_badge.no_avatar .bottom {
    min-height: 90px;
    padding-top: 15px
}

.yaoyue_caogao_win .px_card.no_badge .top {
    height: 240px
}

.yaoyue_caogao_win .px_card.no_badge .bottom {
    height: auto;
    padding-top: 10px
}

.yaoyue_caogao_win .px_card.no_badge .name {
    font-size: 20px;
    line-height: 2.4em
}

.yaoyue_caogao_win .px_card.no_badge .description {
    margin-bottom: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.yaoyue_caogao_win .px_card.no_badge .avatar_wrap {
    width: 30px;
    height: 30px;
    margin: 0 auto
}

.yaoyue_caogao_win .px_card.no_badge .avatar,
.yaoyue_caogao_win .px_card.no_badge .avatar_background {
    display: block;
    width: 30px;
    height: 30px;
    border: none;
    position: absolute;
    bottom: auto;
    left: auto;
    margin-left: auto
}

.yaoyue_caogao_win .px_card.nsfw_placeholder .nsfw_placeholder_content {
    display: table
}

.yaoyue_caogao_win .px_card.nsfw_placeholder img {
    display: none
}

.yaoyue_caogao_win .px_card .nsfw_placeholder_content {
    display: none;
    width: 100%;
    height: 100%;
    background-color: #222;
    text-align: center;
    padding: 0 10px
}

.yaoyue_caogao_win .px_card .nsfw_placeholder_content span {
    display: table-cell;
    vertical-align: middle;
    font-size: 16px;
    font-weight: 700;
    color: #fff
}

.yaoyue_caogao_win .px_card .link_wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100
}

.yaoyue_caogao_win .px_card .top {
    position: relative;
    width: 100%;
    height: 130px;
    -webkit-background-size: cover;
    background-size: cover;
    background-color: #b9c1c7;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    transition: all .2s;
    border: 1px solid #eeeff2;
    border-top: none;
    border-bottom: none
}

.yaoyue_caogao_win .px_card .avatar,
.yaoyue_caogao_win .px_card .avatar_background {
    width: 60px;
    height: 60px;
    position: absolute;
    bottom: -30px;
    left: 50%;
    margin-left: -30px
}

.yaoyue_caogao_win .px_card .avatar {
    border: 2px solid #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: 150;
    transition: all .2s
}

.yaoyue_caogao_win .px_card .avatar:hover {
    opacity: .7
}

.yaoyue_caogao_win .px_card .avatar_background {
    border: 2px solid #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    z-index: 10;
    background-color: #fff
}

.yaoyue_caogao_win .px_card .button,
.yaoyue_caogao_win .px_card .name {
    z-index: 150;
    position: relative
}

.yaoyue_caogao_win .px_card .bottom {
    width: 100%;
    height: 150px;
    text-align: center;
    padding-top: 35px;
    border: 1px solid #eeeff2;
    border-top: none;
    -webkit-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px
}

.yaoyue_caogao_win .px_card .description,
.yaoyue_caogao_win .px_card .followers,
.yaoyue_caogao_win .px_card .name {
    line-height: 1.4em
}

.yaoyue_caogao_win .px_card .name {
    color: #0099e5;
    font-size: 24px;
    cursor: pointer;
    transition: all .2s;
    max-width: calc(100% - 20px);
    max-width: -webkit-calc(100% - 20px);
    max-width: -moz-calc(100% - 20px);
    display: inline-block
}

.yaoyue_caogao_win .px_card .name:hover {
    color: #0099e5
}

.yaoyue_caogao_win .px_card .description,
.yaoyue_caogao_win .px_card .followers {
    color: #b9c1c7;
    font-size: 14px;
    display: block;
    margin: 0 auto 15px;
    max-width: calc(100% - 20px);
    max-width: -webkit-calc(100% - 20px);
    max-width: -moz-calc(100% - 20px)
}

.yaoyue_caogao_win .px_card .description a,
.yaoyue_caogao_win .px_card .followers a {
    color: #525558;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
    position: relative;
    z-index: 150
}

.yaoyue_caogao_win .px_card .description a:hover,
.yaoyue_caogao_win .px_card .followers a:hover {
    color: #0af
}

.yaoyue_caogao_win .px_card .bottom.create_gallery_cta__content {
    cursor: pointer;
    height: 330px !important
}

.yaoyue_caogao_win .checkbox.multi_values:before,
.yaoyue_caogao_win .checkbox:before {
    background-position: 50%;
    background-repeat: no-repeat
}

.yaoyue_caogao_win .px_card .bottom.create_gallery_cta__content .create_gallery_cta__text {
    margin-top: 10px;
    color: #0099e5;
    font-size: 20px
}

.yaoyue_caogao_win .px_card .bottom.create_gallery_cta__content .create_gallery_cta__icon {
    background-image: url(//pic.500px.me/images/svg/set/add.svg);
    background-position: 50% bottom;
    background-repeat: no-repeat;
    -webkit-background-size: 40px;
    background-size: 40px;
    padding-top: calc(50% - 40px)
}

.yaoyue_caogao_win .px_card.medium.gic_audit {
    border: 1px solid #eeeff2
}

.yaoyue_caogao_win .px_card.gic_audit .bottom {
    border: none
}

.yaoyue_caogao_win .px_card .bottom .g_ul li {
    border-bottom: 1px solid #e0e1e3;
    height: 30px;
    line-height: 30px
}

.yaoyue_caogao_win .px_card .bottom .g_ul li:last-child {
    border-bottom: none
}

.yaoyue_caogao_win .px_card .bottom .g_left {
    float: left;
    text-align: left;
    color: #0099e5;
    width: 95px
}

.yaoyue_caogao_win .px_card .bottom .g_right {
    float: right;
    text-align: right;
    width: 70%;
    width: calc(100% - 100px);
    width: -webkit-calc(100% - 100px);
    width: -moz-calc(100% - 100px);
    color: #b5b9bb
}

.yaoyue_caogao_win .px_card .bottom .g_tags {
    padding: 30px 0 20px;
    border-bottom: 1px solid #424141
}

.yaoyue_caogao_win .px_card .bottom .g_tags p {
    display: block;
    margin: 0;
    overflow: hidden;
    max-height: 80px;
    font-size: 12px;
    line-height: 20px
}

.yaoyue_caogao_win .photo__top_buttons {
    z-index: 101;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    pointer-events: none;
    min-height: 50px;
    background: -webkit-gradient(linear, left bottom, left top, from(transparent), to(rgba(0, 0, 0, .6)));
    background: -webkit-linear-gradient(bottom, transparent, rgba(0, 0, 0, .6));
    background: -moz-linear-gradient(bottom, transparent 0, rgba(0, 0, 0, .6) 100%);
    background: linear-gradient(0deg, transparent 0, rgba(0, 0, 0, .6));
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s
}

.yaoyue_caogao_win .photo__top_buttons__close_button:hover {
    background-color: hsla(0, 0%, 100%, .4)
}

.yaoyue_caogao_win .photo__top_buttons__close_button,
.yaoyue_caogao_win .photo__top_buttons__more_button {
    opacity: 0;
    -webkit-background-size: 20px;
    -webkit-border-radius: 3px;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    pointer-events: auto;
    top: 0;
    float: right;
    background-position: 50%;
    width: 25px;
    height: 25px;
    right: 15px;
    cursor: pointer;
    position: absolute;
    background-repeat: no-repeat
}

.yaoyue_caogao_win .photo__top_buttons__more_button {
    background-image: url(//pic.500px.me/images/svg/set/more.svg);
    background-size: 20px;
    border-radius: 3px;
    transition: all .2s ease-out
}

.yaoyue_caogao_win .photo__top_buttons__close_button {
    background-image: url(//pic.500px.me/images/svg/close.svg);
    background-size: 20px;
    border-radius: 3px;
    transition: all .2s ease-out
}

.yaoyue_caogao_win .full-aspect-ratio-photo-grid .photo_thumbnail.active .photo__top_buttons,
.yaoyue_caogao_win .full-aspect-ratio-photo-grid .photo_thumbnail:hover .photo__top_buttons,
.yaoyue_caogao_win .px_card.medium:hover .photo__top_buttons {
    visibility: visible;
    opacity: 1
}

.yaoyue_caogao_win .full-aspect-ratio-photo-grid .photo_thumbnail.active .photo__top_buttons__more_button,
.yaoyue_caogao_win .full-aspect-ratio-photo-grid .photo_thumbnail:hover .photo__top_buttons__edit_button,
.yaoyue_caogao_win .full-aspect-ratio-photo-grid .photo_thumbnail:hover .photo__top_buttons__more_button,
.yaoyue_caogao_win .px_card.medium:hover .photo__top_buttons__close_button,
.yaoyue_caogao_win .px_card.medium:hover .photo__top_buttons__edit_button {
    top: 10px;
    right: 15px;
    opacity: 1
}

.yaoyue_caogao_win .photo_thumbnail.active .credits,
.yaoyue_caogao_win .photo_thumbnail.active .right,
.yaoyue_caogao_win .photo_thumbnail:hover .credits,
.yaoyue_caogao_win .photo_thumbnail:hover .right {
    opacity: 1;
    bottom: 10px;
    -webkit-transition: bottom .2s;
    -moz-transition: bottom .2s;
    transition: bottom .2s
}

.header-fixed {
    height: 106px
}

.header-fixed .header-new {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000
}

.header-fixed .navbar-new {
    position: fixed;
    left: 0;
    right: 0;
    top: 50px;
    z-index: 1000
}

.header-new {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: #fff;
    position: relative
}

.header-new-logo img {
    height: 18px
}

.header-new-right,
.header-new-right-search {
    display: flex;
    align-items: center
}

.header-new-right-search {
    width: 148px;
    height: 32px;
    background: #f7f8fa;
    border-radius: 16px
}

.header-new-right-search img {
    width: 16px;
    margin: 0 16px
}

.header-new-right-search span {
    font-size: 16px;
    color: #6d7378
}

.header-new-right-setting {
    width: 24px;
    margin-left: 20px;
    text-align: center
}

.header-new-right-setting img {
    width: 24px
}

.header-new-right-setting img.small {
    width: 16px
}

.header-new-popup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 50px;
    z-index: 1001
}

.header-new-popup-shade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0, 0, 0, .4)
}

.header-new-popup.large {
    top: 106px
}

.header-new-popup.large .header-new-popup-info {
    padding-top: 12px
}

.header-new-popup-info {
    padding-bottom: 12px;
    background: #fff;
    position: relative;
    text-align: left
}

.header-new-popup-inner {
    padding: 8px 0
}

.header-new-popup a {
    display: block;
    padding: 12px 16px;
    font-size: 16px;
    color: #222
}

.header-new-popup a.loginout {
    color: #eb0000
}

.header-new-popup a:active {
    background: #0870d1;
    color: #fff
}

.navbar-new {
    height: 56px;
    padding: 0 20px;
    justify-content: space-between;
    background: #fff
}

.navbar-new,
.navbar-new a {
    display: flex;
    align-items: center
}

.navbar-new a {
    flex-direction: column
}

.navbar-new a img {
    width: 24px;
    display: none
}

.navbar-new a img:first-child {
    display: inline-block
}

.navbar-new a span {
    font-size: 10px;
    color: #222;
    margin-top: 4px;
    line-height: 14px
}

.navbar-new a.active img {
    display: inline-block
}

.navbar-new a.active img:first-child {
    display: none
}

.navbar-new a.active span {
    color: #0870d1
}

.navbar-new a.mine.active img,
.navbar-new a.mine.active img:first-child {
    display: inline-block
}

.navbar-new-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden
}

._text_title {
    font-size: 48px;
    color: #fff;
    margin: 0 0 24px
}

.lyby.jssorbody {
    display: flex !important;
    justify-content: center;
    align-items: center
}

.slider_main {
    height: 100%
}

.slider_main .jssorbody {
    position: relative;
    margin: 0 auto;
    top: 0;
    left: 0;
    overflow: hidden;
    visibility: hidden
}

.slider_main .jssorbody .slider_loading {
    position: absolute;
    top: 0;
    left: 0
}

.slider_main .jssorbody .slider_loading .overlay {
    filter: alpha(opacity=70);
    opacity: .7;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.slider_main .jssorbody .slider_loading .loadimg {
    position: absolute;
    display: block;
    background: url(http://500px.me/images/loading.gif) no-repeat 50%;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.slider_main .jssorbody .sliderImgs {
    cursor: default;
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden
}

.masthead.loaded {
    display: block;
    width: 1260px
}

.masthead.loaded .text_wrap {
    width: 100%;
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.masthead .button {
    width: 215px;
    font-size: 18px;
    height: 64px;
    line-height: 64px;
    border-radius: 32px;
    font-size: 24px;
    color: #222;
    background: #fff;
    border: 0 !important;
    transition: .3s
}

.masthead .button:hover {
    background: #d7d8db
}

._head_title_wrapper {
    width: 500px;
    margin: -160px 0 16px
}

._head_title_wrapper img {
    width: 100%
}

.red_link {
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #d12928;
    line-height: 22px;
    text-align: center;
    display: inline-block;
    border-bottom: 2px solid #d12928
}

.masthead h1,
.masthead h2 {
    color: #fff;
    margin: 0
}

.masthead h1 {
    font-size: 48px;
    margin-bottom: 27px;
    font-weight: 400
}

.masthead h2 {
    margin-bottom: 40px
}

.masthead .text_wrap {
    font-weight: 600;
    vertical-align: middle;
    position: relative;
    opacity: 0;
    padding: 0 10px;
    -webkit-transform: scale(.95);
    -moz-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
    -webkit-transition: all .6s ease-out;
    -moz-transition: all .6s ease-out;
    transition: all .6s ease-out;
    -webkit-transition-delay: .6s;
    -moz-transition-delay: .6s;
    transition-delay: .6s;
    text-align: left;
    pointer-events: none
}

.masthead .text_wrap .button {
    white-space: nowrap;
    pointer-events: auto
}

.masthead .scroll_arrow {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    transition: opacity .2s;
    width: 60px;
    margin: auto;
    padding: 20px 0 10px
}

.masthead .scroll_arrow:hover {
    opacity: 1
}

.masthead .scroll_arrow img {
    width: 31px;
    height: 19px
}

.masthead .downloads {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out;
    opacity: 0;
    color: #fff;
    position: absolute;
    bottom: 20px;
    left: 20px;
    text-align: right;
    line-height: 0;
    font-size: 0
}

.masthead .downloads a {
    display: inline-block;
    margin-right: 10px
}

.masthead .downloads img {
    width: auto;
    height: 40px
}

.masthead .credits {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out;
    opacity: 0;
    color: #fff;
    position: absolute;
    bottom: 20px;
    right: 20px;
    text-align: right
}

.masthead .credits span {
    display: block
}

.masthead .credits span.license {
    margin-top: 5px
}

.masthead .credits a {
    font-weight: 700;
    color: #fff;
    position: relative
}

.masthead .credits a:before {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    content: " ";
    width: 100%;
    padding: 1px 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    height: 100%;
    position: absolute;
    top: -1px;
    left: -3px;
    display: block;
    background-color: hsla(0, 0%, 100%, 0);
    z-index: 1;
    -webkit-transition: .1s;
    -moz-transition: .1s;
    transition: .1s
}

.masthead .credits a:hover:before {
    background-color: hsla(0, 0%, 100%, .15)
}

.masthead .credits a:before {
    padding: 2px 5px;
    top: -2px;
    left: -5px
}

.sliderImgs .__info {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0;
    background-color: rgba(0, 0, 0, .2)
}

.sliderImgs ._imgMaincmp {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%
}

.jssorb032 {
    position: absolute;
    bottom: 60px;
    right: 12px
}

.jssorb032 .i {
    position: absolute;
    cursor: pointer;
    width: 16px;
    height: 16px
}

.jssorb032 .i svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.jssorb032 .i .b {
    fill: #fff;
    fill-opacity: .7;
    stroke: #000;
    stroke-width: 1200;
    stroke-miterlimit: 10;
    stroke-opacity: .25
}

.jssorb032 .i:hover .b {
    fill: #000;
    fill-opacity: .6;
    stroke: #fff;
    stroke-opacity: .35
}

.jssorb032 .iav .b {
    fill: #000;
    fill-opacity: 1;
    stroke: #fff;
    stroke-opacity: .35
}

.jssorb032 .i.idn {
    opacity: .3
}

.jssora051 {
    display: block;
    position: absolute;
    cursor: pointer
}

.jssora051 .a {
    fill: none;
    stroke: #fff;
    stroke-width: 360;
    stroke-miterlimit: 10
}

.jssora051:hover {
    opacity: .8
}

.jssora051.jssora051dn {
    opacity: .5
}

.jssora051.jssora051ds {
    opacity: .3;
    pointer-events: none
}

.__credits {
    z-index: 2;
    opacity: 1;
    width: 1260px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    text-align: right;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
    color: #6d7378
}

.__credits .line {
    white-space: nowrap;
    position: relative;
    max-width: 100%;
    display: inline-block;
    float: left;
    clear: both
}

.__credits .title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 2px
}

.__credits .photographer {
    font-size: 13px;
    font-weight: 400
}

.__credits a {
    color: #fff;
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2em;
    color: inherit;
    margin-left: 4px
}

@media only screen and (max-width: 1280px) {
    .masthead {
        padding-left: 112px
    }

    .masthead .text_wrap {
        padding: 0
    }
}

@media only screen and (max-width: 838px) {
    .masthead {
        padding-left: 64px
    }
}

@media only screen and (max-width: 679px) {
    .masthead {
        padding: 0 30px
    }

    .masthead .text_wrap ._text_title {
        font-size: 32px;
        margin: 0 0 16px
    }

    .masthead .text_wrap .button {
        width: 145px;
        height: 48px;
        line-height: 48px;
        font-size: 16px;
        border-radius: 32px
    }

    ._head_title_wrapper {
        width: 100%
    }

    .jssorb032 {
        bottom: 35px
    }

    .__credits {
        width: 100%;
        padding-right: 16px;
        bottom: 0;
        font-size: 12px
    }

    .__credits a,
    .__credits span {
        display: inline-block;
        vertical-align: middle
    }

    .__credits a {
        max-width: 35%;
        white-space: nowrap;
        line-height: normal
    }
}

.nft ._text_title img {
    width: 490px
}

.nft ._come .button {
    width: auto;
    height: auto;
    background: none;
    padding: 0
}

@media screen and (max-width: 672px) {
    .nft ._text_title img {
        width: 25rem
    }

    .nft ._come img {
        width: 16rem
    }
}

.common_nav_maincmp .positionFiexd {
    position: fixed;
    z-index: 200;
    width: 100%;
    background: #fff
}

.common_nav_maincmp .px_tabs {
    text-align: center;
    white-space: nowrap;
    list-style-type: none;
    overflow-x: auto
}

.common_nav_maincmp .px_tabs>li {
    display: inline;
    margin: 0 20px
}

.common_nav_maincmp .px_tabs>li>a {
    font-weight: 400;
    font-size: 16px;
    display: inline-block;
    padding: 15px 0;
    border-bottom: 2px solid transparent;
    color: #71767a;
    cursor: pointer;
    text-transform: uppercase
}

.common_nav_maincmp .px_tabs>li>a:hover {
    color: #0099e5
}

.common_nav_maincmp .px_tabs>li.active>a {
    color: #0099e5;
    border-bottom: 2px solid #0099e5
}

.common_nav_maincmp ._h3 {
    font-weight: 700;
    margin: 0;
    padding: 0
}

.common_nav_maincmp .px_topnav__link_text {
    font-size: 16px
}

.sidebar__profile_avatar {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    margin-right: 15px;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    transition: opacity .2s
}

.sidebar__profile_avatar .sidebar__profile_avatar_img {
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.sidebar__profile_avatar .qy_icon {
    background-repeat: no-repeat;
    background-image: url(https://cdn-uat.500px.me/images/qianyue/icon_2.svg);
    position: absolute;
    width: 35%;
    bottom: 0;
    right: 0;
    height: 35%
}

.story_container {
    margin: 0 auto;
    width: 100%;
    background-color: #f7f8fa;
    text-align: center;
    padding: 20px 0 30px
}

.story_container img {
    width: 100%;
    height: auto;
    vertical-align: top
}

.story_container .logo {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    vertical-align: middle
}

.story_container .lists {
    margin: 0 auto 30px;
    text-align: left;
    padding: 0 50px;
    width: 100%
}

.story_container .lists .abstract {
    width: 100%;
    border-bottom: 1px solid #eeeff2;
    padding: 20px 50px;
    overflow: hidden;
    position: relative;
    cursor: pointer
}

.story_container .lists .abstract:last-child {
    padding-bottom: 40px
}

.story_container .lists .abstract .img {
    float: left;
    width: 400px;
    margin-right: 30px;
    position: relative
}

.story_container .lists .abstract .img .top-img {
    position: relative;
    width: 100%;
    height: 240px;
    background-size: cover;
    background-position: 50%;
    background-color: #b9c1c7;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s
}

.story_container .lists .abstract .writing {
    float: left;
    height: 240px;
    position: relative;
    width: calc(100% - 430px);
    width: -webkit-calc(100% - 430px);
    width: -moz-calc(100% - 430px)
}

.story_container .lists .abstract .writing .author {
    line-height: 30px;
    margin-top: 15px
}

.story_container .lists .abstract .writing .author .avatar_wrap {
    width: 30px;
    height: 30px;
    display: inline-block
}

.story_container .lists .abstract .writing .author .nickName {
    margin-left: 10px;
    display: inline-block;
    position: relative;
    z-index: 101;
    width: 160px;
    text-align: left;
    font-size: 14px;
    color: #71767a;
    cursor: pointer
}

.story_container .lists .abstract .writing .author .nickName a,
.story_container .lists .abstract .writing .author .nickName a:hover,
.story_container .lists .abstract .writing .author .nickName a:visited {
    color: #71767a
}

.story_container .lists .abstract .writing h2 {
    font-size: 16px;
    font-weight: 400;
    color: #525558;
    margin-top: 15px
}

.story_container .lists .abstract .writing h2 a,
.story_container .lists .abstract .writing h2 a:hover,
.story_container .lists .abstract .writing h2 a:visited {
    color: #525558
}

.story_container .lists .abstract .writing .story-desc {
    -webkit-transition: opacity .2s ease-out, color .2s ease-out;
    -moz-transition: opacity .2s ease-out, color .2s ease-out;
    transition: opacity .2s ease-out, color .2s ease-out
}

.story_container .lists .abstract .writing .story-desc:link,
.story_container .lists .abstract .writing .story-desc:visited {
    color: #000
}

.story_container .lists .abstract .writing .story-desc:hover {
    color: #333
}

.story_container .lists .abstract .writing .label {
    display: none
}

.story_container .lists .abstract .writing p {
    font-size: 14px;
    line-height: 1.5;
    text-align: justify;
    color: #71767a;
    margin-top: 10px;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.story_container .lists .abstract .writing .correlation {
    font-size: 12px;
    color: #b8c1c8;
    margin-top: 60px;
    position: absolute;
    bottom: 10px
}

.story_container .lists .abstract .link_wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100
}

.story_container .cardLists {
    display: inline-block;
    width: 100%;
    font-size: 0
}

.story_container .cardLists .card {
    display: inline-block;
    max-width: 360px;
    width: 360px;
    margin: 10px;
    border-radius: 2px;
    background-color: #fff;
    border: 1px solid #eeeff2;
    cursor: pointer;
    position: relative
}

.story_container .cardLists .card .link_wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100
}

.story_container .cardLists .card .topImg {
    width: 100%;
    height: auto
}

.story_container .cardLists .card .topImg .top-img {
    position: relative;
    width: 100%;
    height: 240px;
    background-size: cover;
    background-position: 50%;
    background-color: #b9c1c7;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s
}

.story_container .cardLists .card .content {
    padding: 10px 15px 13px
}

.story_container .cardLists .card .content .title {
    text-align: center;
    font-size: 16px;
    color: #525558;
    width: 90%;
    margin: 0 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.story_container .cardLists .card .content .item-property-container {
    position: absolute;
    z-index: 666;
    top: 250px;
    right: 15px;
    width: 16px;
    height: 16px
}

.story_container .cardLists .card .content .item-property-container .state-img {
    width: 100%;
    height: 100%;
    background-size: 16px 16px
}

.story_container .cardLists .card .content .item-property-container .state-img.profile {
    background-image: url(https://cdn-uat.500px.me/images/userDetail/profile-gray.svg)
}

.story_container .cardLists .card .content .item-property-container .state-img.public {
    background-image: url(https://cdn-uat.500px.me/images/userDetail/public-gray.svg)
}

.story_container .cardLists .card .content .item-property-container .state-img.private {
    background-image: url(https://cdn-uat.500px.me/images/userDetail/private-gray.svg)
}

.story_container .cardLists .card .content .label {
    height: 20px;
    margin-top: 15px;
    text-align: center;
    width: 100%;
    overflow: hidden;
    font-size: 0
}

.story_container .cardLists .card .content .label span {
    display: inline-block;
    width: 68px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    height: 20px;
    line-height: 20px;
    border-radius: 100px;
    background-color: #eaebed;
    font-size: 12px;
    color: #525558;
    text-align: center;
    margin-left: 15px
}

.story_container .cardLists .card .content .label span:first-child {
    margin-left: 0
}

.story_container .cardLists .card .content .info {
    margin-top: 15px;
    font-size: 12px;
    color: #b8c1c8;
    line-height: 30px;
    overflow: hidden
}

.story_container .cardLists .card .content .info>div:first-child {
    float: left
}

.story_container .cardLists .card .content .info>div:last-child {
    float: right
}

.story_container .cardLists .card .content .info .noPublish {
    color: #0099e5
}

.story_container .cardLists .card .content .info .author .avatar_wrap {
    display: inline-block
}

.story_container .cardLists .card .content .info .author .nickName {
    margin-left: 0;
    display: inline-block;
    z-index: 101;
    position: relative;
    width: 160px;
    text-align: left
}

.story_container .cardLists .card .content .info .author .nickName a {
    color: #b8c1c8
}

.story_container .cardLists .card:hover {
    -webkit-box-shadow: 0 1px 15px rgba(0, 0, 0, .08);
    box-shadow: 0 1px 15px rgba(0, 0, 0, .08)
}

.story_select_main .story_container {
    padding: 0
}

.story_select_main .story_container .overlay {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    cursor: pointer
}

.story_select_main .story_container .overlay .overlay_2 {
    z-index: 11;
    background-color: #fff;
    width: 100%;
    height: 100%;
    opacity: .3
}

.story_select_main .story_container .overlay .selected-circle {
    width: 22px;
    height: 22px;
    opacity: 0;
    position: absolute;
    top: 10px;
    right: 10px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: #fff;
    background-image: url(https://cdn-uat.500px.me/images/userDetail/photoSelect.svg);
    -webkit-background-size: 20px;
    background-size: 20px;
    background-position: 50%;
    background-repeat: no-repeat;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center
}

.story_select_main .story_container .cardLists .card {
    width: 290px
}

.story_select_main .story_container .cardLists .card .topImg .top-img {
    height: 170px
}

.story_select_main .story_container .cardLists .card .content .item-property-container {
    top: 180px
}

.story_select_main .story_container .cardLists .card.selected .overlay,
.story_select_main .story_container .cardLists .card.selected .overlay .selected-circle {
    opacity: 1
}

@media only screen and (min-width: 400px) {
    .discovery-story-list-region .story_container {
        width: 380px
    }
}

@media only screen and (min-width: 800px) {
    .discovery-story-list-region .story_container {
        width: 760px
    }
}

@media only screen and (min-width: 1180px) {
    .discovery-story-list-region .story_container {
        width: 1140px
    }
}

@media only screen and (min-width: 1560px) {
    .discovery-story-list-region .story_container {
        width: 1520px
    }
}

@media only screen and (min-width: 1960px) {
    .discovery-story-list-region .story_container {
        width: 1900px
    }
}

@media only screen and (min-width: 2360px) {
    .discovery-story-list-region .story_container {
        width: 2280px
    }
}

@media only screen and (max-width: 1024px) {
    .story_container .lists {
        padding: 0
    }

    .story_container .lists .abstract {
        padding-left: 10px;
        padding-right: 10px
    }

    .story_container .lists .abstract .img {
        width: 360px
    }

    .story_container .lists .abstract .writing {
        width: calc(100% - 390px);
        width: -webkit-calc(100% - 390px);
        width: -moz-calc(100% - 390px)
    }

    .story_container .lists .abstract .writing .correlation {
        margin-top: 23px
    }
}

@media only screen and (max-width: 776px) {
    .story_container .lists {
        text-align: center;
        margin-bottom: 0
    }

    .story_container .lists .abstract {
        display: inline-block;
        max-width: 360px;
        margin: 10px;
        padding: 0;
        border-radius: 2px;
        overflow: hidden;
        background-color: #fff;
        border: 1px solid #eeeff2
    }

    .story_container .lists .abstract:last-child {
        padding-bottom: 0
    }

    .story_container .lists .abstract .img {
        float: none;
        width: 100%;
        height: auto;
        margin-right: 0
    }

    .story_container .lists .abstract .writing {
        float: none;
        width: 100%;
        padding: 15px 15px 25px;
        position: relative;
        height: auto
    }

    .story_container .lists .abstract .writing .author {
        position: absolute;
        left: 15px;
        bottom: 25px;
        margin-top: 0
    }

    .story_container .lists .abstract .writing h2 {
        margin-top: 0;
        margin-bottom: 82px;
        text-align: center
    }

    .story_container .lists .abstract .writing .label {
        display: inline-block;
        position: relative;
        bottom: 60px;
        height: 20px;
        margin-top: 15px;
        text-align: center;
        font-size: 0
    }

    .story_container .lists .abstract .writing .label span {
        display: inline-block;
        width: 68px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        height: 20px;
        line-height: 20px;
        border-radius: 100px;
        background-color: #eaebed;
        font-size: 12px;
        color: #525558;
        text-align: center;
        margin-left: 15px
    }

    .story_container .lists .abstract .writing .label span:first-child {
        margin-left: 0
    }

    .story_container .lists .abstract .writing p {
        display: none
    }

    .story_container .lists .abstract .writing .correlation {
        margin-top: 0;
        position: absolute;
        right: 15px;
        bottom: 32px
    }

    .story_container .lists .abstract .writing .correlation .zan {
        display: none
    }

    .story_container .cardLists {
        display: inline-block;
        width: 100%;
        padding: 10px;
        font-size: 0
    }

    .story_container .cardLists .card {
        display: inline-block;
        width: calc(100% - 20px);
        width: -webkit-calc(100% - 20px);
        width: -moz-calc(100% - 20px);
        border-radius: 2px;
        overflow: hidden;
        background-color: #fff;
        border: 1px solid #eeeff2;
        cursor: pointer;
        position: relative
    }

    .story_container .cardLists .card .content {
        padding: 15px 15px 25px
    }
}

@media only screen and (max-width: 400px) {
    .story_container {
        width: 100%
    }
}

.series-card {
    position: absolute;
    overflow: hidden;
    background-color: #eeeff2
}

.series-card img {
    position: absolute;
    object-fit: cover
}

.series-card .series-icon {
    right: 12px;
    top: 12px;
    z-index: 1
}

.add_to_galleries_popover__composite .tribe_set_add {
    height: 50px;
    line-height: 50px;
    color: #0099e5;
    font-size: 14px;
    border-bottom: 1px solid #eeeff2;
    background-color: #fff;
    padding-left: 15px;
    cursor: pointer
}

.add_to_galleries_popover__composite .tribe_set_add.selectTribe {
    color: #b9c1c7;
    font-size: 12px;
    cursor: default
}

.add_to_galleries_popover__composite .inside {
    background-color: #f7f8fa;
    height: 425px
}

.add_to_galleries_popover__composite.in_progress .add_to_galleries_popover_empty {
    display: none
}

.pill {
    display: inline-block;
    background-color: #b9c1c7;
    line-height: 18px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    padding: 0 5px;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    -webkit-transition: background-color .1s ease-in-out;
    -moz-transition: background-color .1s ease-in-out;
    transition: background-color .1s ease-in-out
}

.webui-popover .header {
    -webkit-border-radius: 1px 1px 0 0;
    border-radius: 1px 1px 0 0;
    width: auto;
    background-color: #fff;
    height: 45px;
    line-height: 44px;
    padding: 0 10px;
    border-bottom: 1px solid rgba(34, 34, 34, .1);
    z-index: 2110
}

.webui-popover .header h3 {
    display: block;
    float: left;
    color: #71767a;
    margin: 0
}

.webui-popover .header .pill {
    margin: 13px 0 0;
    float: right
}

.add_to_galleries_popover__create_section {
    height: 50px
}

.add_to_galleries_popover__title_wrap {
    height: 0
}

.add_to_galleries_popover__create_icon {
    z-index: 100;
    cursor: pointer;
    position: absolute;
    width: 50px;
    height: 50px;
    border-bottom: 1px solid #eeeff2
}

.add_to_galleries_popover__title_input {
    background-image: url(https://cdn-uat.500px.me/images/userDetail/add-white.svg);
    background-position: 15px;
    background-repeat: no-repeat;
    position: relative;
    z-index: 99;
    width: 100%;
    border: none;
    border-bottom: 1px solid #eeeff2;
    -webkit-border-radius: 0;
    border-radius: 0;
    line-height: 48px;
    margin-left: 0;
    padding: 0 0 0 50px;
    height: 50px
}

.add_to_galleries_popover__title_input:focus {
    border-color: #eeeff2
}

.add_to_galleries_popover__create_gallery_details {
    background-color: #fff;
    visibility: hidden;
    height: 0;
    opacity: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.add_to_galleries_popover__create_wrap {
    padding: 15px 10px;
    border-bottom: 1px solid #eeeff2
}

.add_to_galleries_popover__create_button {
    width: 100%;
    text-align: center;
    font-size: 14px
}

.add_to_galleries_popover__galleries_list {
    overflow-y: auto;
    height: calc(100% - 95px);
    height: -webkit-calc(100% - 95px);
    height: -moz-calc(100% - 95px)
}

.add_to_galleries_popover__item {
    position: relative
}

.add_to_galleries_popover__item:hover .add_to_galleries_popover_item__title {
    max-width: calc(100% - 110px);
    max-width: -webkit-calc(100% - 110px);
    max-width: -moz-calc(100% - 110px)
}

.add_to_galleries_popover__item:hover .add_to_galleries_popover_item__title.add_to_galleries_popover_item__title_private {
    max-width: calc(100% - 130px);
    max-width: -webkit-calc(100% - 130px);
    max-width: -moz-calc(100% - 130px)
}

.add_to_galleries_popover__item:hover .add_to_galleries_popover_item__view_gallery_button {
    visibility: visible;
    opacity: 1
}

.popover .list p {
    margin: 0
}

.popover .list li {
    font-size: 14px;
    font-weight: 400;
    color: #71767a;
    line-height: 48px;
    background-color: #f7f8fa;
    border-top: 1px solid #eeeff2;
    height: 50px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-transition: background-color .1s;
    -moz-transition: background-color .1s;
    transition: background-color .1s
}

.popover .list li:hover {
    background-color: #eeeff2
}

.popover .list li:first-child {
    border-top: 0
}

.popover .list li:first-child a:not(.button) {
    -webkit-border-radius: 0 0 1px 1px;
    border-radius: 0 0 1px 1px
}

.popover .list li a:not(.button) {
    display: block;
    color: #71767a;
    padding: 0 10px;
    height: 100%
}

.popover .list li a:not(.button).active .check {
    opacity: 1;
    -webkit-animation: pulse_large .4s ease-in-out 0s forwards;
    -moz-animation: pulse_large .4s 0s ease-in-out forwards;
    animation: pulse_large .4s ease-in-out 0s forwards
}

.popover .list li a:not(.button) img {
    float: left;
    position: relative;
    top: 10px;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    -webkit-border-radius: 2px;
    border-radius: 2px
}

.popover .list li a:not(.button) strong {
    float: left;
    font-weight: 700
}

.popover .list li a:not(.button) span {
    font-weight: 400
}

.popover .list li a:not(.button) .check {
    float: right;
    display: block;
    height: 50px;
    width: 16px;
    opacity: 0;
    -webkit-transform: scale(.95);
    -moz-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
    -webkit-transition: all .15s;
    -moz-transition: all .15s;
    transition: all .15s;
    -webkit-background-size: 16px;
    background-size: 16px
}

.add_to_galleries_popover_item__thumb_wrap {
    float: left;
    position: relative;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    margin-top: 10px;
    margin-left: 10px
}

.add_to_galleries_popover_item__checkmark {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(https://cdn-uat.500px.me/images/userDetail/check_setPop.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    -webkit-background-size: 16px;
    background-size: 16px;
    opacity: 0;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    transition: opacity .2s;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color: #eeeff2
}

.add_to_galleries_popover_item__checkmark--checked {
    opacity: 1;
    -webkit-animation: pulse_large .4s ease-in-out 0s forwards;
    -moz-animation: pulse_large .4s 0s ease-in-out forwards;
    animation: pulse_large .4s ease-in-out 0s forwards
}

.add_to_galleries_popover_item__title {
    float: left;
    line-height: 48px;
    max-width: calc(100% - 60px);
    max-width: -webkit-calc(100% - 60px);
    max-width: -moz-calc(100% - 60px);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.add_to_galleries_popover_item__title.is_dbz {
    position: relative;
    padding-right: 57px
}

.add_to_galleries_popover_item__title.is_dbz:after {
    position: absolute;
    right: 7px;
    content: "代表作";
    background-color: #b0d9ff;
    color: #0870d1;
    height: 17px;
    line-height: 12px;
    border-radius: 3px;
    padding: 3px;
    font-size: 12px;
    top: calc(50% - 8px)
}

.add_to_galleries_popover_item__title.is_CZ {
    position: relative;
    padding-right: 45px
}

.add_to_galleries_popover_item__title.is_CZ:after {
    position: absolute;
    right: 7px;
    content: "策展";
    background-color: #d7d8db;
    color: #222;
    height: 17px;
    line-height: 12px;
    border-radius: 3px;
    padding: 3px;
    font-size: 12px;
    top: calc(50% - 8px)
}

.add_to_galleries_popover_item__view_gallery_button {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    right: 10px;
    top: 16px
}

.add_to_galleries_popover_item__lock {
    float: right;
    background-image: url(https://cdn-uat.500px.me/images/userDetail/lock.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    -webkit-background-size: 10px;
    background-size: 10px;
    width: 20px;
    position: absolute;
    height: 30px;
    top: 10px;
    right: 10px
}

.add_to_galleries_popover_item__thumbnail {
    top: 0 !important;
    border: 1px solid #b9c1c7;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color: #eeeff2
}

.add_to_galleries_popover_item__view_gallery_button--private {
    right: 30px
}

.dialogbox_main_cmp {
    z-index: 2200
}

.add_to_galleries_popover__create_section--active {
    background-color: #fff
}

.add_to_galleries_popover__create_section--active .add_to_galleries_popover__create_section {
    height: auto
}

.add_to_galleries_popover__create_section--active .add_to_galleries_popover__create_icon {
    border: none;
    border-bottom: 1px solid transparent
}

.add_to_galleries_popover__create_section--active .add_to_galleries_popover__create_gallery_details {
    background-color: #fff;
    visibility: visible;
    margin-top: 50px;
    height: auto;
    opacity: 1
}

.add_to_galleries_popover__create_section--active .add_to_galleries_popover__galleries_list {
    height: calc(100% - 207px);
    height: -webkit-calc(100% - 207px);
    height: -moz-calc(100% - 207px)
}

.verifybox {
    position: relative;
    box-sizing: border-box;
    border-radius: 2px;
    border: 1px solid #e4e7eb;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.verifybox-top {
    padding: 0 15px;
    height: 50px;
    line-height: 50px;
    text-align: left;
    font-size: 16px;
    color: #45494c;
    border-bottom: 1px solid #e4e7eb;
    box-sizing: border-box
}

.verifybox-bottom {
    padding: 15px;
    box-sizing: border-box
}

.verifybox-close {
    position: absolute;
    top: 13px;
    right: 9px;
    width: 24px;
    height: 24px;
    text-align: center;
    cursor: pointer
}

.verify-mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2001;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .3);
    transition: all .5s
}

.verify-tips {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    height: 30px;
    padding: 0 12px;
    line-height: 30px;
    color: #fff;
    transition-duration: .5s
}

.suc-bg {
    background-color: rgba(92, 184, 92, .5);
    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C)
}

.err-bg {
    background-color: rgba(217, 83, 79, .5);
    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F)
}

.tips-enter,
.tips-leave-to {
    bottom: -30px
}

.tips-enter-active,
.tips-leave-active {
    transition: bottom .5s
}

.verify-code {
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 5px;
    border: 1px solid #ddd
}

.cerify-code-panel {
    height: 100%;
    overflow: hidden
}

.verify-code-area {
    float: left
}

.verify-input-area {
    float: left;
    width: 60%;
    padding-right: 10px
}

.verify-change-area {
    line-height: 30px;
    float: left
}

.varify-input-code {
    display: inline-block;
    width: 100%;
    height: 25px
}

.verify-change-code {
    color: #337ab7;
    cursor: pointer
}

.verify-btn {
    width: 200px;
    height: 30px;
    background-color: #337ab7;
    color: #fff;
    border: none;
    margin-top: 10px
}

.verify-bar-area {
    position: relative;
    text-align: center;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px
}

.verify-bar-area,
.verify-bar-area .verify-move-block {
    background: #fff;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.verify-bar-area .verify-move-block {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    box-shadow: 0 0 2px #888;
    -webkit-border-radius: 1px
}

.verify-bar-area .verify-move-block:hover {
    background-color: #337ab7;
    color: #fff
}

.verify-bar-area .verify-left-bar {
    position: absolute;
    top: -1px;
    left: -1px;
    background: #f0fff0;
    cursor: pointer;
    border: 1px solid #ddd
}

.verify-bar-area .verify-left-bar,
.verify-img-panel {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.verify-img-panel {
    margin: 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-radius: 3px;
    position: relative
}

.verify-img-panel .verify-refresh {
    width: 25px;
    height: 25px;
    text-align: center;
    padding: 5px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    background: hsla(0, 0%, 100%, .5)
}

.verify-img-panel .icon-refresh {
    font-size: 20px;
    color: #fff
}

.verify-img-panel .verify-gap {
    background-color: #fff;
    position: relative;
    z-index: 2;
    border: 1px solid #fff
}

.verify-bar-area .verify-move-block .verify-sub-block {
    position: absolute;
    text-align: center;
    z-index: 3
}

.verify-bar-area .verify-move-block .verify-icon {
    font-size: 18px
}

.verify-bar-area .verify-msg {
    z-index: 3
}

.iconfont {
    font-family: iconfont !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-check:before {
    background-image: url("")
}

.icon-check:before,
.icon-close:before {
    content: " ";
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    background-size: contain
}

.icon-close:before {
    background-image: url("")
}

.icon-right:before {
    background-size: cover;
    background-image: url("")
}

.icon-refresh:before,
.icon-right:before {
    content: " ";
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    background-size: contain
}

.icon-refresh:before {
    background-image: url("")
}

.verify-img-out {
    height: 200px
}

.siderEmbed {
    margin-top: 80px
}

.pointEmbed,
.pointPopup,
.sliderPopup {
    margin-top: 40px
}

.v2_new_addSet {
    display: inline-block;
    width: 19px;
    height: 19px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
    pointer-events: auto;
    background-image: url(https://cdn-uat.500px.me/images/userDetail/gallery-add.svg);
    background-position: 0;
    background-repeat: no-repeat;
    -webkit-background-size: 38px 19px;
    background-size: 38px 19px
}

.v2_new_addSet.is_feed_flow {
    width: 24px;
    height: 24px;
    background-size: 24px;
    background-image: url(https://cdn-uat.500px.me/images/icon/v2_add_set.svg?dc=2)
}

.like-button.new_fav {
    position: relative;
    min-width: 60px;
    text-align: center;
    background-color: #ff4c4c;
    border-color: #f33;
    text-shadow: none
}

.like-button.new_fav .icon {
    height: 20px;
    width: 20px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto
}

.like-button.new_fav .icon .shape {
    fill: transparent;
    stroke: #fff;
    stroke-width: 3px;
    stroke-dasharray: 150;
    stroke-linejoin: round;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.like-button.new_fav:hover {
    background-color: #f66
}

.like-button.new_fav:active {
    background-color: #ff4c4c
}

.like-button.new_fav.hearted:not(.only_icon) {
    background-color: #525558;
    border-color: #46484b
}

.like-button.new_fav.hearted:not(.only_icon):hover {
    background-color: #5e6265
}

.like-button.new_fav.hearted .icon {
    -webkit-animation: heart_animation .8s linear both;
    -moz-animation: heart_animation .8s linear both;
    animation: heart_animation .8s linear both
}

.like-button.new_fav.hearted .icon .shape {
    fill: #fff;
    stroke-opacity: 0
}

.like-button.new_fav.with_count {
    padding-left: 40px
}

.like-button.new_fav.with_count .icon {
    left: 10px;
    right: auto
}

.like-button.new_like {
    position: relative;
    min-width: 60px;
    text-align: center;
    background-color: #0099e5;
    border-color: #08c;
    text-shadow: none
}

.like-button.new_like .icon {
    height: 20px;
    width: 20px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto
}

.like-button.new_like .icon .shape {
    fill: transparent;
    stroke: #fff;
    stroke-width: 2px;
    stroke-dasharray: 150;
    stroke-linejoin: round;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.like-button.new_like:hover {
    background-color: #0af
}

.like-button.new_like:active {
    background-color: #0099e5
}

.like-button.new_like.liked {
    pointer-events: none
}

.like-button.new_like.liked .icon {
    -webkit-animation: heart_animation .8s linear both;
    -moz-animation: heart_animation .8s linear both;
    animation: heart_animation .8s linear both
}

.like-button.new_like.liked .icon .shape {
    fill: #fff;
    stroke-opacity: 0
}

.like-button.new_like.liked:not(.only_icon) {
    background-color: #525558;
    border-color: #46484b
}

.like-button.new_like.with_count {
    padding-left: 40px
}

.like-button.new_like.with_count .icon {
    left: 10px;
    right: auto
}

.like-button.only_icon {
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 36px;
    height: 30px;
    min-width: 0;
    padding: 0;
    vertical-align: middle;
    line-height: 0;
    background-color: transparent
}

.like-button.only_icon .icon {
    width: 24px;
    height: 24px
}

.like-button.only_icon:hover {
    background-color: transparent
}

.like-button.only_icon:hover .icon .shape {
    fill: hsla(0, 0%, 100%, .4)
}

.v2_new_fav {
    color: #71767a;
    display: inline-block;
    cursor: pointer
}

.v2_new_fav .value {
    display: block;
    float: right;
    height: 24px;
    line-height: 24px;
    margin-left: 5px;
    font-size: 16px;
    font-weight: 500
}

.v2_new_fav .icon {
    width: 24px;
    height: 24px
}

.v2_new_fav .bian {
    fill: #71767a
}

.v2_new_fav .xin {
    fill: transparent;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.v2_new_fav:hover .icon .xin {
    fill: #eeeff2
}

.v2_new_fav.hearted .icon {
    -webkit-animation: heart_animation .8s linear both;
    -moz-animation: heart_animation .8s linear both;
    animation: heart_animation .8s linear both
}

.v2_new_fav.hearted .icon .bian {
    fill: transparent
}

.v2_new_fav.hearted .icon .xin {
    fill: #ff4c4c
}

.v2_new_fav.disabled {
    cursor: default;
    opacity: .5
}

.v2_new_zf {
    color: #71767a;
    display: inline-block;
    cursor: pointer
}

.v2_new_zf .value {
    display: block;
    float: right;
    height: 24px;
    line-height: 24px;
    margin-left: 5px;
    font-size: 16px;
    font-weight: 500
}

.v2_new_zf .icon {
    width: 24px;
    height: 24px
}

.v2_new_zf .xian {
    fill: #d4d4d4
}

.v2_new_zf .bian {
    fill: #71767a
}

.v2_new_zf .xin {
    fill: transparent;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.v2_new_zf:hover .icon .xin {
    fill: #eeeff2
}

.v2_new_zf.hearted .icon {
    -webkit-animation: heart_animation .8s linear both;
    -moz-animation: heart_animation .8s linear both;
    animation: heart_animation .8s linear both
}

.v2_new_zf.hearted .icon .bian {
    fill: transparent
}

.v2_new_zf.hearted .icon .xin {
    fill: #0099e5
}

.v2_new_zf.button {
    width: 70px;
    padding-left: 40px;
    position: relative;
    color: #fff
}

.v2_new_zf.button .icon {
    height: 20px;
    width: 20px;
    position: absolute;
    top: 0;
    left: 10px;
    bottom: 0;
    right: auto;
    margin: auto
}

.v2_new_zf.button .value {
    font-size: 12px;
    line-height: 28px
}

.v2_new_zf.button .bian {
    fill: #eeeff2
}

.v2_new_zf.button.hearted {
    background-color: #525558;
    border-color: #46484b
}

.v2_new_zf.button.hearted:hover {
    background-color: #5e6265
}

.v2_new_zf.button.hearted .icon .xin {
    fill: #eeeff2
}

.v2_new_zf.button:not(.hearted):hover .icon .xin {
    fill: transparent
}

.v2_new_zf.only_icon {
    vertical-align: middle;
    pointer-events: auto
}

.v2_new_zf.only_icon .bian {
    fill: #eeeff2
}

.v2_new_zf.only_icon.hearted .icon .xin {
    fill: #fff
}

.v2_new_zf.only_icon:not(.hearted):hover .icon .xin {
    fill: #71767a
}

.v2_new_zf.disabled {
    cursor: default;
    opacity: 1 !important
}

.v2_new_zf.disabled._isprivate {
    opacity: .5 !important
}

.v2_new_zf.disabled.hearted {
    pointer-events: inherit !important
}

.v2_new_zf.disabled .value {
    cursor: default
}

.v2_new_zf.yingji {
    cursor: default
}

.v2_new_zf.yingji,
.v2_new_zf.yingji._isprivate {
    opacity: .5 !important
}

.v2_new_zf.yingji.hearted {
    pointer-events: inherit !important
}

.v2_new_zf.yingji .value {
    cursor: default
}

.contain_v2 {
    padding: 15px;
    margin: 0 auto
}

.contain_v2 textarea {
    width: 100%;
    height: 98px;
    background-color: #f7f8fa;
    border: 1px solid #b9c1c7;
    margin-bottom: 8px;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0
}

.contain_v2 .tags_main .tags_li {
    cursor: pointer;
    float: left;
    border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    -o-border-radius: 14px;
    border: 1px solid #0870d1;
    padding: 8px 15px;
    font-size: 14px;
    letter-spacing: -.2px;
    text-align: center;
    color: #0870d1;
    margin-bottom: 8px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s
}

.contain_v2 .tags_main .tags_li:hover {
    background: #0099e5;
    color: #fff
}

.contain_v2 .tags_main .tags_li+.tags_li {
    margin-left: 4px
}

.contain_v2 .__bottom {
    text-align: right
}

.contain_v2 .__bottom .button {
    border-radius: 35px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    -o-border-radius: 35px
}

.photo_thumbnail {
    position: absolute;
    overflow: hidden;
    background-color: #eeeff2;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%
}

.photo_thumbnail .video_checking {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none
}

.photo_thumbnail .video_checking .video_checking_tip {
    padding-top: 20px;
    font-size: 14px;
    color: #fff;
    background: url(https://cdn-uat.500px.me/images/videoIcon/clock.svg) no-repeat top;
    background-size: 14px
}

.photo_thumbnail img {
    position: relative;
    width: 100%
}

.photo_thumbnail .photo_link {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0;
    left: 0
}

.photo_thumbnail ._avatar_cmp_ {
    width: 30px;
    height: 30px;
    margin-right: 0
}

.photo_thumbnail .group_b {
    opacity: 1;
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #fff;
    color: #525558;
    width: 24px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    -o-border-radius: 18px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
    z-index: 102
}

.photo_thumbnail .group_b .videoIcon {
    width: 15px;
    vertical-align: middle
}

.photo_thumbnail .credits {
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 110px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
    text-align: left;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-shadow: 0 0 1px rgba(0, 0, 0, .6)
}

.photo_thumbnail .credits .photo_info_wrap {
    position: relative;
    max-width: calc(100% - 40px);
    max-width: -webkit-calc(100% - 40px);
    max-width: -moz-calc(100% - 40px);
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px
}

.photo_thumbnail .credits .photo_info_wrap .timestamp {
    display: block;
    font-size: 12px;
    margin-top: 1px;
    cursor: default;
    pointer-events: none
}

.photo_thumbnail .credits .photo_title,
.photo_thumbnail .credits .photographer {
    display: inline-block;
    max-width: 100%;
    font-size: 14px;
    font-weight: 700;
    font-weight: 500;
    color: #fff;
    position: relative;
    position: static;
    pointer-events: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.photo_thumbnail .credits .photo_title:before,
.photo_thumbnail .credits .photographer:before {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    content: " ";
    width: 100%;
    padding: 1px 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    height: 100%;
    position: absolute;
    top: -1px;
    left: -3px;
    display: block;
    background-color: hsla(0, 0%, 100%, 0);
    z-index: 1;
    -webkit-transition: all .1s;
    -moz-transition: all .1s;
    transition: all .1s
}

.photo_thumbnail .credits .photo_title:hover:before,
.photo_thumbnail .credits .photographer:hover:before {
    background-color: hsla(0, 0%, 100%, .15)
}

.photo_thumbnail .credits.no_avatar .photo_info_wrap {
    max-width: 100%;
    margin-left: 0
}

.photo_thumbnail .info {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    pointer-events: none;
    min-height: 50px;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, .6)));
    background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .6));
    background: -moz-linear-gradient(top, transparent 0, rgba(0, 0, 0, .6) 100%);
    background: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .6));
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    transition: opacity .2s
}

.photo_thumbnail .right {
    opacity: 0;
    position: absolute;
    right: 10px;
    bottom: 0;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s
}

.photo_thumbnail .right .add-gallery-button,
.photo_thumbnail .right .favorite-button,
.photo_thumbnail .right .like-button,
.photo_thumbnail .right .zhuanfa-button {
    display: inline-block;
    pointer-events: auto;
    vertical-align: middle;
    font-size: 0
}

.photo_thumbnail .right .like-button .icon {
    width: 24px;
    height: 24px
}

.photo_thumbnail .right .zhuanfa-button {
    width: 36px
}

.photo_thumbnail .photo__top_buttons {
    z-index: 101;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    pointer-events: none;
    min-height: 50px;
    background: -webkit-gradient(linear, left bottom, left top, from(transparent), to(rgba(0, 0, 0, .6)));
    background: -webkit-linear-gradient(bottom, transparent, rgba(0, 0, 0, .6));
    background: -moz-linear-gradient(bottom, transparent 0, rgba(0, 0, 0, .6) 100%);
    background: linear-gradient(0deg, transparent 0, rgba(0, 0, 0, .6));
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s
}

.photo_thumbnail .photo__top_buttons .photo_thumbnail__pulse {
    position: absolute;
    top: 0;
    right: 10px;
    -webkit-transition: top .2s;
    -moz-transition: top .2s;
    transition: top .2s;
    font-size: 24px;
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, .6)
}

.photo_thumbnail .photo__top_buttons__group_pic {
    text-align: left;
    top: 0;
    left: 10px;
    line-height: 20px;
    padding-left: 10px;
    padding-top: 10px;
    font-size: 14px;
    color: #fff
}

.photo_thumbnail .photo__top_buttons__group_pic .u_left {
    max-width: 70%
}

.photo_thumbnail .photo__top_buttons__group_pic .u_left li {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.photo_thumbnail.active .info,
.photo_thumbnail.active .photo__top_buttons,
.photo_thumbnail:hover .info,
.photo_thumbnail:hover .photo__top_buttons {
    visibility: visible;
    opacity: 1
}

.photo_thumbnail.active .credits,
.photo_thumbnail.active .right,
.photo_thumbnail:hover .credits,
.photo_thumbnail:hover .right {
    opacity: 1;
    bottom: 10px;
    -webkit-transition: bottom .2s;
    -moz-transition: bottom .2s;
    transition: bottom .2s
}

.photo_thumbnail .select_mode_mask {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity .2s
}

.photo_thumbnail .select_mode_mask .check_mark {
    width: 22px;
    height: 22px;
    opacity: .5;
    position: absolute;
    bottom: 3px;
    right: 3px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: #000;
    border: 2px solid #fff;
    -webkit-background-size: 20px;
    background-size: 20px;
    background-position: 50%;
    background-repeat: no-repeat;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center
}

.photo_thumbnail.selected .select_mode_mask,
.photo_thumbnail:hover .select_mode_mask {
    opacity: 1
}

.photo_thumbnail.selected .select_mode_mask .check_mark {
    opacity: 1;
    background: url()
}

.full-aspect-ratio-photo-grid .grid-container {
    position: relative
}

.zuopin_maincmp {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 0 40px
}

.zuopin_maincmp .profile_nav {
    margin-bottom: 30px
}

.zuopin_maincmp .bt_info {
    margin: 0 0 65px;
    font-size: 30px;
    font-weight: 600;
    color: #525558
}

.zuopin_maincmp ._tab_maincmp {
    margin-bottom: 30px
}

@media only screen and (max-width: 679px) {
    .zuopin_maincmp {
        padding-bottom: 32px
    }

    .zuopin_maincmp.zuopin {
        padding-left: 20px;
        padding-right: 20px
    }

    .zuopin_maincmp .bt_info {
        font-size: 18px;
        margin-top: 10px !important;
        margin-bottom: 20px
    }
}

.zuopin {
    max-width: 1260px
}

.discovery-story-list-region .story_container {
    background: #fff;
    max-width: 1140px
}

.page_banner {
    height: 400px;
    background: url(https://cdn-uat.500px.me/images/unloginIndex/recommend_bg.png) no-repeat 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative
}

.page_banner_tribe {
    background-image: url(https://cdn-uat.500px.me/images/unloginIndex/tribe_bg.png)
}

.page_banner_sale {
    background-image: url(https://cdn-uat.500px.me/images/unloginIndex/sale_bg.png)
}

.page_banner_contest {
    background-image: url(https://cdn-uat.500px.me/images/unloginIndex/contest_bg.png)
}

.page_banner h2 {
    font-size: 48px;
    color: #fff;
    margin: 20px 0 0
}

.page_banner>div {
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 1260px;
    transform: translateX(-50%);
    text-align: right
}

.page_banner>div a {
    font-size: 12px;
    color: #b6b9bb
}

@media only screen and (max-width: 1280px) {
    .page_banner>div {
        width: 100%;
        padding-right: 16px
    }
}

@media only screen and (max-width: 679px) {
    .page_banner {
        height: 190px;
        background-size: cover
    }

    .page_banner,
    .page_banner_tribe {
        background-image: url(https://cdn-uat.500px.me/images/unloginIndex/h5/tribe_bg.png)
    }

    .page_banner_sale {
        background-image: url(https://cdn-uat.500px.me/images/unloginIndex/h5/sale_bg.png)
    }

    .page_banner_contest {
        background-image: url(https://cdn-uat.500px.me/images/unloginIndex/h5/contest_bg.png)
    }

    .page_banner img {
        width: 80px
    }

    .page_banner h2 {
        font-size: 24px;
        margin-top: 6px
    }

    .page_banner>div {
        width: 100%;
        padding-right: 16px
    }
}

.page_tiper {
    padding: 32px 0;
    color: #222
}

.page_tiper h3 {
    font-size: 24px;
    margin: 0
}

.page_tiper p {
    font-size: 16px;
    line-height: 24px;
    margin: 10px 0 24px
}

.page_tiper a {
    display: inline-block;
    width: 158px;
    line-height: 48px;
    border-radius: 24px;
    background: #222;
    font-size: 16px;
    color: #fff;
    text-align: center;
    transition: .3s
}

.page_tiper a:hover {
    opacity: .8
}

@media only screen and (max-width: 679px) {
    .page_tiper {
        padding: 24px 0
    }

    .page_tiper h3 {
        font-size: 21px
    }

    .page_tiper p {
        font-size: 14px;
        line-height: 20px;
        margin: 5px 40px 14px
    }
}

.contest_maincmp {
    margin-bottom: 40px
}

.contest_maincmp .c__item {
    display: inline-block;
    vertical-align: top;
    width: 400px;
    height: 225px;
    margin: 0 10px
}

.contest_maincmp .c__item>div {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    display: "-webkit-" flex;
    display: "-moz-" flex;
    display: "-ms-" flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center
}

.contest_maincmp .c__item>div>div {
    width: 100%;
    z-index: 2
}

.contest_maincmp .c__item>div>div h4 {
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 5px
}

.contest_maincmp .c__item>div>div .c__desc {
    font-size: 16px;
    color: #fff
}

.contest_maincmp .c__item>div .c_link {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100
}

.contest_maincmp .c__item .c_overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .3)), to(rgba(0, 0, 0, .7)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, .3), rgba(0, 0, 0, .7));
    background: -moz-linear-gradient(top, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .7) 100%);
    background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .7))
}

@media only screen and (max-width: 838px) {
    .contest_maincmp .c__item {
        width: 343px;
        height: 192px
    }
}

@media only screen and (max-width: 679px) {
    .contest_maincmp {
        margin-bottom: 0;
        padding: 0 16px
    }

    .contest_maincmp .c__item {
        width: 100%;
        height: 194px;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0
    }

    .contest_maincmp .c__item+.c__item {
        margin-top: 10px
    }

    .contest_maincmp .c__item .c__title {
        font-size: 24px
    }

    .contest_maincmp .c__item .c__desc {
        font-size: 16px
    }
}

.tribe_zuppin_main {
    padding-bottom: 20px
}

.m_module,
.r_module {
    width: 400px;
    height: 380px;
    background: #fff;
    position: relative;
    display: inline-block;
    vertical-align: top;
    box-shadow: 0 2px 16px 0 rgba(0, 0, 0, .16);
    margin: 0 15px
}

.m_module:last-child,
.r_module:last-child {
    margin-bottom: 0
}

.m_module .top-stamp-region,
.r_module .top-stamp-region {
    position: absolute;
    top: 8px;
    left: 8px
}

.m_module .top-stamp-region .stamp,
.r_module .top-stamp-region .stamp {
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -o-border-radius: 12px;
    text-align: center;
    display: inline-block;
    width: 55px;
    height: 20px;
    line-height: 20px;
    font-size: 12px
}

.m_module .top-stamp-region .stamp.offline,
.r_module .top-stamp-region .stamp.offline {
    background-color: #b9c1c7;
    color: #fff
}

.m_module .top-action-region,
.r_module .top-action-region {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 66;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    color: #b8c1c8;
    cursor: pointer;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
    opacity: 0
}

.m_module .top-action-region:hover,
.r_module .top-action-region:hover {
    color: #71767a
}

.m_module:hover .top-action-region,
.r_module:hover .top-action-region {
    opacity: 1
}

.m_module .guest,
.r_module .guest {
    overflow: hidden;
    cursor: pointer;
    position: relative;
    padding-top: 29px;
    padding-left: 25px
}

.m_module .guest .portrait,
.r_module .guest .portrait {
    float: left;
    position: relative;
    margin-right: 19px
}

.m_module .guest .portrait a,
.r_module .guest .portrait a {
    display: inline-block;
    width: 90px;
    height: 90px;
    position: relative
}

.m_module .guest .portrait:hover,
.r_module .guest .portrait:hover {
    opacity: .8
}

.m_module .guest .portrait .avatar,
.r_module .guest .portrait .avatar {
    border-radius: 45px;
    height: 90px;
    width: 90px
}

.m_module .guest .portrait .offical-v-logo,
.r_module .guest .portrait .offical-v-logo {
    position: absolute;
    width: 22px;
    height: 22px;
    right: 0;
    bottom: 0
}

.m_module .avatar,
.m_module .name,
.r_module .avatar,
.r_module .name {
    vertical-align: middle
}

.m_module .info,
.r_module .info {
    display: inline-block;
    padding-top: 7px;
    width: 230px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    float: left
}

.m_module .info .name,
.r_module .info .name {
    color: #3b3d3f;
    margin-bottom: 0
}

.m_module .info .name a,
.r_module .info .name a {
    display: inline-block
}

.m_module .info .name a span,
.r_module .info .name a span {
    font-weight: 400
}

.m_module .info .name span,
.r_module .info .name span {
    font-size: 18px;
    line-height: 26px;
    color: #525558;
    width: 238px;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    text-align: left
}

.m_module .info .watchword,
.r_module .info .watchword {
    height: 20px;
    font-size: 14px;
    color: #525558;
    margin-bottom: 5px;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: left
}

.m_module .info li,
.r_module .info li {
    float: left;
    font-size: 12px;
    color: #b9c1c7;
    padding-top: 0;
    margin-right: 15px
}

.m_module .info li span,
.r_module .info li span {
    padding-left: 0
}

.m_module .info li span:last-child,
.r_module .info li span:last-child {
    margin-left: 4px
}

.m_module .works,
.r_module .works {
    clear: left;
    margin-top: 30px;
    margin-left: 22px
}

.m_module .works li,
.r_module .works li {
    float: left;
    padding-right: 4px
}

.m_module .works li:first-child .tribe-img,
.r_module .works li:first-child .tribe-img {
    width: 176px;
    height: 176px
}

.m_module .works li:nth-child(n+2) .tribe-img,
.r_module .works li:nth-child(n+2) .tribe-img {
    width: 86px;
    height: 86px
}

.m_module .works li:nth-child(n+4) .tribe-img,
.r_module .works li:nth-child(n+4) .tribe-img {
    margin-top: 2px
}

.m_module .works li a,
.r_module .works li a {
    display: inline-block
}

.m_module .works .work_empty_div,
.r_module .works .work_empty_div {
    width: 355px;
    height: 175px;
    background-color: #e9edf3;
    text-align: center
}

.m_module .works .work_empty_div .img_empty,
.r_module .works .work_empty_div .img_empty {
    margin-top: 50px
}

.m_module .works .work_empty_div .img_empty_txt,
.r_module .works .work_empty_div .img_empty_txt {
    margin-top: 15px;
    font-size: 14px
}

.m_module .state,
.r_module .state {
    clear: left;
    padding: 20px 0 24px 28px;
    font-size: 13px;
    height: 18px;
    text-align: left
}

.m_module .state .match,
.r_module .state .match {
    color: #019be5
}

.m_module .state .appraise,
.r_module .state .appraise {
    color: #545559;
    margin-left: 5px
}

@media only screen and (max-width: 838px) {
    .tribe_zuppin_main {
        padding-bottom: 0
    }

    .m_module_list {
        padding: 0 16px
    }

    .m_module,
    .r_module {
        width: 343px;
        height: 330px;
        padding: 0 20px 10px
    }

    .m_module .guest,
    .r_module .guest {
        padding: 10px 0
    }

    .m_module .guest .portrait,
    .r_module .guest .portrait {
        width: 90px;
        height: 90px;
        top: 10px;
        margin-right: 0
    }

    .m_module .guest .portrait img.avatar,
    .r_module .guest .portrait img.avatar {
        width: 90px;
        height: 90px
    }

    .m_module .guest .portrait a,
    .r_module .guest .portrait a {
        display: inline-block
    }

    .m_module .guest .info,
    .r_module .guest .info {
        text-align: left;
        width: calc(96% - 90px);
        width: -webkit-calc(96% - 90px);
        width: -moz-calc(96% - 90px);
        padding-top: 16px;
        margin-left: 4%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .m_module .guest .info .name,
    .r_module .guest .info .name {
        text-align: left
    }

    .m_module .guest .info .name span,
    .r_module .guest .info .name span {
        width: 100%
    }

    .m_module .guest .info ul,
    .r_module .guest .info ul {
        margin-top: 10px
    }

    .m_module .guest .info ul li:last-child,
    .r_module .guest .info ul li:last-child {
        margin-right: 0
    }

    .m_module .works,
    .r_module .works {
        margin: 20px 0 0
    }

    .m_module .works .work_empty_div,
    .r_module .works .work_empty_div {
        width: 100%
    }

    .m_module .works ul li,
    .r_module .works ul li {
        width: calc(25% - 2px);
        width: -webkit-calc(25% - 2px);
        width: -moz-calc(25% - 2px)
    }

    .m_module .works ul li:first-child,
    .r_module .works ul li:first-child {
        width: calc(50% - 4px);
        width: -webkit-calc(50% - 4px);
        width: -moz-calc(50% - 4px)
    }

    .m_module .works ul li a,
    .r_module .works ul li a {
        width: 100%
    }

    .m_module .works ul li img,
    .r_module .works ul li img {
        width: 100% !important
    }

    .m_module .state,
    .r_module .state {
        padding-left: 0
    }
}

@media only screen and (max-width: 768px) {

    .m_module,
    .r_module {
        margin: 0 10px
    }
}

@media only screen and (max-width: 679px) {

    .m_module,
    .r_module {
        width: 100%;
        padding: 0 8%;
        margin: 0 0 10px
    }
}

.sale_main {
    background: #f7f8fa;
    padding-bottom: 60px
}

.sale_main_list {
    font-size: 0
}

.sale_main_list li {
    display: inline-block;
    vertical-align: top;
    width: 295px;
    margin: 0 10px;
    text-align: center
}

.sale_main_list li>div {
    background: #fff;
    transition: .3s
}

.sale_main_list li>div:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 16px 0 rgba(0, 0, 0, .1)
}

.sale_main_list li h3 {
    font-size: 18px;
    color: #222;
    margin: 16px 0 6px
}

.sale_main_list li p {
    font-size: 16px;
    color: #666;
    margin: 0;
    padding-bottom: 20px
}

@media only screen and (max-width: 1280px) {
    .sale_main_list li {
        width: 210px
    }

    .sale_main_list li img {
        width: 100%
    }
}

@media only screen and (max-width: 838px) {
    .sale_main_list li {
        width: 166px;
        margin: 6px
    }

    .sale_main_list li p {
        font-size: 14px;
        line-height: 20px;
        height: 40px;
        padding-bottom: 10px;
        box-sizing: content-box
    }

    .sale_main_list li:nth-child(2) p {
        width: 100px;
        margin: 0 auto
    }
}

@media only screen and (max-width: 768px) {
    .sale_main_list li h3 {
        font-size: 16px
    }
}

@media only screen and (max-width: 679px) {
    .sale_main_list li {
        width: 43%
    }
}

@media only screen and (max-width: 679px) {
    .sale_main {
        padding-bottom: 26px
    }
}

.bottom_maincmp {
    padding-top: 48px
}

.bottom_maincmp .app {
    background: url(https://cdn-uat.500px.me/images/unloginIndex/wave.png) no-repeat 100% 100%
}

.bottom_maincmp .bt_tuwen_main {
    width: 1260px;
    height: 255px;
    margin: 0 auto
}

.bottom_maincmp .bt_tuwen_main .___item {
    float: left;
    width: 50%;
    height: 100%
}

.bottom_maincmp .bt_tuwen_main .___item.one {
    padding-right: 5px
}

.bottom_maincmp .bt_tuwen_main .___item.two {
    padding-left: 5px
}

.bottom_maincmp .bt_header_logo {
    display: table;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background-image: url(https://cdn-uat.500px.me/images/unloginIndex/banner-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%
}

.bottom_maincmp .bt_header_logo .__desc {
    display: table-cell;
    vertical-align: middle;
    font-size: 30px;
    text-align: center;
    color: #fff;
    width: 100%;
    height: 100%
}

.bottom_maincmp .bt_header_logo .__desc>div {
    width: 559px;
    line-height: 50px;
    margin: 0 auto
}

.bottom_maincmp .sheYingshi_maincmp {
    padding-bottom: 50px
}

.bottom_maincmp .sheYingshi_maincmp .bt_info {
    margin: 0 0 65px;
    font-size: 30px;
    font-weight: 600;
    color: #525558
}

.bottom_maincmp .sheYingshi_maincmp .__body__ {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    display: "-webkit-" flex;
    display: "-moz-" flex;
    display: "-ms-" flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center
}

.bottom_maincmp .sheYingshi_maincmp .__body__ .__name {
    font-size: 24px;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: -.58px;
    text-align: center;
    color: #525558;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.bottom_maincmp .sheYingshi_maincmp .__body__ .__fensi {
    margin-top: 10px;
    font-size: 20px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: -.48px;
    text-align: center;
    color: #525558
}

.bottom_maincmp .sheYingshi_maincmp .__body__>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.bottom_maincmp .sheYingshi_maincmp ._avatar_ {
    padding-bottom: 30px
}

.bottom_maincmp .sheYingshi_maincmp ._avatar_ .sidebar__profile_avatar {
    margin-right: 0;
    width: 160px;
    height: 160px
}

@media only screen and (max-width: 679px) {
    .bottom_maincmp .app {
        background-size: 100%
    }

    .bottom_maincmp .sheYingshi_maincmp .bt_info {
        font-size: 18px;
        margin-top: 10px !important;
        margin-bottom: 20px
    }
}

.app {
    height: 470px;
    overflow-y: hidden
}

.app .wrapper {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    height: 100%
}

.app .text_wrap {
    text-align: left;
    display: table;
    height: 100%
}

.app .text_wrap .center {
    display: table-cell;
    vertical-align: middle
}

.app .text_wrap h2,
.app .text_wrap h4 {
    font-weight: 400;
    line-height: 1.4em;
    margin: 0
}

.app .text_wrap h2 {
    color: #222;
    font-size: 36px;
    margin-bottom: 23px;
    font-weight: 700
}

.app .text_wrap h4 {
    color: #525558;
    font-size: 16px;
    max-width: 500px
}

.app .downloads {
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    transition: all .1s ease-out;
    color: #fff;
    text-align: left;
    line-height: 0;
    font-size: 0;
    margin-top: 20px
}

._erwenma {
    margin-top: 30px
}

._erwenma img {
    width: 145px;
    height: 145px
}

._erwenma .app_ma {
    margin-right: 50px
}

.app .downloads a {
    display: inline-block;
    margin-right: 50px
}

.app .downloads img {
    display: block !important;
    width: auto;
    height: 40px;
    margin-left: 5px
}

.iphone {
    position: absolute;
    width: 446px;
    height: 442px;
    overflow: visible;
    line-height: 0;
    z-index: 1;
    top: 0;
    left: auto;
    right: 0;
    -webkit-transform: translateZ(0) rotateY(26deg);
    -moz-transform: translateZ(0) rotateY(26deg);
    -ms-transform: translateZ(0) rotateY(26deg);
    transform: translateZ(0) rotateY(26deg);
    -moz-perspective: 2200px;
    -ms-perspective: 2200px;
    perspective: 2200px;
    -webkit-perspective: 2200px
}

.iphone img {
    max-width: 100%
}

.iphone_wrap .wrap {
    width: 413px;
    top: 100px;
    z-index: 0;
    height: 833px;
    position: absolute;
    -moz-perspective: 2200px;
    -ms-perspective: 2200px;
    perspective: 2200px;
    -webkit-perspective: 2200px
}

.iphone * {
    outline: 1px solid transparent
}

.iphone.dark .body,
.iphone.dark .home {
    background-color: #333;
    border-color: #666
}

.iphone.dark .body .hole {
    background-color: #666
}

.iphone.dark .nub {
    border-color: #666;
    background-color: #333
}

.iphone.dark .edge {
    background-color: #4d4d4d;
    border-color: #666
}

.iphone.dark .edge:after,
.iphone.dark .edge:before {
    background-color: #333
}

.iphone.gold .body,
.iphone.gold .home {
    border-color: #dbc5b0
}

.iphone.gold .body .hole {
    background-color: #dbc5b0
}

.iphone.gold .nub {
    border-color: #d3b89e
}

.iphone.gold .edge {
    background-color: #e3d2c2;
    border-color: #dbc5b0
}

.iphone.gold .edge:after,
.iphone.gold .edge:before {
    background-color: #fff
}

.iphone .outline {
    border: 3px solid #000;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    width: 381px;
    height: 673px;
    display: block;
    position: absolute;
    z-index: 3;
    top: 80px;
    left: 16px
}

.iphone .screen {
    width: 375px;
    height: 667px;
    background: #fff url(/images/index/app.jpg) top no-repeat;
    -webkit-background-size: 375px;
    background-size: 375px;
    opacity: 0;
    position: absolute;
    -webkit-transition: opacity .2s ease-in-out;
    -moz-transition: .2s opacity ease-in-out;
    transition: opacity .2s ease-in-out;
    text-align: center
}

.iphone .screen:first-child {
    opacity: 1
}

.iphone .screen img {
    width: 100%
}

.iphone .time {
    display: inline-block;
    text-align: center;
    padding: 10px 8px 10px 4px;
    font-weight: 500;
    background-color: #fff;
    font-size: 11.5px;
    letter-spacing: .01em
}

.iphone .body {
    width: 413px;
    height: 833px;
    background-color: #fff;
    border: 3px solid #b9c1c7;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    position: relative;
    z-index: 2;
    text-align: center;
    font-size: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: flat
}

.iphone .body,
.iphone .body .hole {
    -webkit-transition: background-color .2s, border-color .2s;
    -moz-transition: .2s background-color, .2s border-color;
    transition: background-color .2s, border-color .2s
}

.iphone .body .hole {
    display: inline-block;
    background-color: #525558
}

.iphone .body .sensor {
    width: 10px;
    height: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    display: block;
    margin: 10px auto
}

.iphone .body .speaker {
    width: 60px;
    height: 4px;
    -webkit-border-radius: 8px;
    border-radius: 8px
}

.iphone .body .camera {
    width: 12px;
    height: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    position: relative;
    top: 4px;
    margin-right: 20px;
    margin-left: -32px
}

.iphone .nub {
    width: 10px;
    background-color: #fff;
    border: 3px solid #b9c1c7;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    -webkit-transition: background-color .2s, border-color .2s;
    -moz-transition: .2s background-color, .2s border-color;
    transition: background-color .2s, border-color .2s
}

.iphone .sleep {
    height: 60px;
    right: -6px;
    top: 153px
}

.iphone .sleep:active {
    margin-left: -4px
}

.iphone .switch {
    height: 40px;
    left: -6px;
    top: 80px
}

.iphone .up {
    height: 60px;
    left: -6px;
    top: 153px
}

.iphone .up:active {
    margin-right: -4px
}

.iphone .down {
    height: 60px;
    left: -6px;
    top: 223px
}

.iphone .down:active {
    margin-right: -4px
}

.iphone .home {
    width: 56px;
    height: 56px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
    border: 3px solid #b9c1c7;
    bottom: 12px;
    left: 50%;
    margin-left: -28px;
    position: absolute;
    z-index: 7;
    -webkit-transition: background-color .2s, border-color .2s;
    -moz-transition: .2s background-color, .2s border-color;
    transition: background-color .2s, border-color .2s
}

.iphone_wrap .edge {
    -moz-transform: translateZ(0) rotateY(-50deg);
    -ms-transform: translateZ(0) rotateY(-50deg);
    transform: translateZ(0) rotateY(-50deg);
    -webkit-transform: translateZ(0) rotateY(-50deg);
    content: "";
    display: block;
    -webkit-border-radius: 50px/40px;
    border-radius: 50px/40px;
    height: 825px;
    margin-left: -36px;
    top: 4px;
    position: absolute;
    width: 140px;
    z-index: 0;
    background-color: #d0d5d9;
    border: 4px solid #b9c1c7;
    -webkit-transform-style: flat;
    -webkit-transition: background-color .1s, border-color .2s;
    -moz-transition: .1s background-color, .2s border-color;
    transition: background-color .1s, border-color .2s
}

.iphone_wrap .edge:after,
.iphone_wrap .edge:before {
    content: "";
    display: block;
    position: absolute;
    height: 8px;
    background-color: #b9c1c7;
    width: 100%;
    -webkit-transition: background-color .2s;
    -moz-transition: .2s background-color;
    transition: background-color .2s
}

.iphone_wrap .edge:after {
    top: 46px
}

.iphone_wrap .edge:before {
    bottom: 46px
}

.iphone_wrap .edge.left:after {
    left: 0
}

.iphone_wrap .edge.right {
    -moz-transform: rotateY(50deg);
    -ms-transform: rotateY(50deg);
    transform: rotateY(50deg);
    -webkit-transform: rotateY(50deg);
    right: 0
}

.iphone_wrap .edge.right:after {
    right: 0
}

.foot_btn_maincmp {
    margin: 50px 0
}

.foot_btn_maincmp .button {
    width: 480px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    font-weight: 600
}

.footer {
    background-color: #f7f8fa
}

.footer .about-title {
    font-size: 24px
}

.footer .footer_wrap2 {
    max-width: 1180px;
    margin: 0 auto;
    overflow: hidden;
    padding: 40px 20px
}

.footer .footer-about-link {
    display: block
}

.footer .footer_wrap2 .column {
    display: inline-block;
    float: left;
    text-align: left
}

.footer .footer_wrap2 .logo {
    display: none
}

.footer .footer_wrap2 .column.about {
    color: #525558
}

.footer .footer_wrap2 .bottom-slide {
    margin-left: 10px;
    margin-right: 10px
}

.footer .footer_wrap2 .bottom-slide:first-child {
    margin-left: 0
}

.footer .footer_wrap2 .record-number {
    margin-left: 30px;
    margin-right: 20px;
    color: #71767a;
    text-decoration: underline
}

.footer .footer_wrap2 .beian {
    color: #71767a;
    text-decoration: none;
    display: inline-block
}

.footer .footer_wrap2 .beian span {
    margin: 0 0 0 5px
}

.footer .footer_wrap2 .column.bottom-1 {
    width: 65%
}

.footer .footer_wrap2 .column.bottom-2 {
    float: right
}

.bottom-slide a {
    -webkit-transition: opacity .2s ease-out, color .2s ease-out;
    -moz-transition: opacity .2s ease-out, color .2s ease-out;
    transition: opacity .2s ease-out, color .2s ease-out
}

.bottom-slide a:link,
.bottom-slide a:visited {
    color: #525558
}

.bottom-slide a:hover {
    color: #84888c
}

.bottom-2 {
    width: 35%;
    padding-left: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.app-download {
    float: left
}

.communication-content,
.downloads-content {
    padding-top: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.downloads-content a {
    display: block
}

.downloads-content img.app_store {
    width: 110px
}

.downloads-content .app_android {
    margin-left: 0;
    margin-top: 6px
}

.communication-div {
    float: left
}

.communication-content .com-per {
    float: left;
    width: 120px;
    font-size: 12px
}

.communication-content .com-per img {
    max-width: 100%
}

.communication-content .com-per ._text {
    margin-top: 10px;
    text-align: center
}

.communication-content .com-per+.com-per {
    margin-left: 30px
}

.communication-content .com-weixin-div {
    margin-left: 50px
}

@media only screen and (max-width: 1280px) {
    .app .wrapper {
        width: 100%;
        padding: 0 64px
    }

    .app .wrapper .iphone {
        right: 40px
    }

    .app .wrapper ._erwenma {
        margin-top: 10px
    }

    .app .wrapper ._erwenma .app_ma,
    .app .wrapper .downloads a {
        margin-right: 32px
    }

    .app .wrapper .text_wrap h2 {
        margin-bottom: 10px
    }

    .app .wrapper .text_wrap h4 {
        max-width: 340px
    }

    .zuopin .full-aspect-ratio-photo-grid {
        padding: 0 64px
    }

    .zuopin_maincmp .m_module:first-child {
        display: block;
        margin: 0 auto 30px
    }

    .contest_maincmp .c__item:first-child {
        display: block;
        margin: 0 auto 20px
    }

    .footer .footer_wrap2 .beian {
        margin-top: 10px
    }
}

@media only screen and (max-width: 838px) {
    .app .wrapper {
        padding: 0 32px
    }

    .app .wrapper .iphone {
        right: 10px
    }

    .zuopin .full-aspect-ratio-photo-grid {
        padding: 0 32px
    }
}

@media only screen and (max-width: 768px) {
    .app .wrapper .iphone {
        width: 380px;
        top: 50px
    }

    .zuopin_maincmp .m_module:first-child {
        display: block;
        margin: 0 auto 20px
    }
}

@media only screen and (max-width: 679px) {
    .sheYingshi_maincmp .__body__ {
        flex-direction: column
    }

    .zuopin .full-aspect-ratio-photo-grid {
        padding: 0
    }

    .contest_maincmp .c__item:first-child {
        display: block;
        margin: 0 auto
    }

    .zuopin_maincmp .m_module:first-child {
        display: block;
        margin: 0 auto 10px
    }

    .app {
        height: auto !important;
        overflow: auto
    }

    .app .wrapper {
        width: 100%;
        padding: 0 30px;
        height: auto
    }

    .app .wrapper .iphone_wrap {
        padding: 24px 0
    }

    .app .wrapper .iphone {
        position: static;
        height: auto;
        width: 100%
    }

    .app .wrapper ._erwenma {
        display: flex;
        margin: 0;
        justify-content: space-between
    }

    .app .wrapper ._erwenma img {
        max-width: 45%;
        height: auto
    }

    .app .wrapper ._erwenma img:first-child {
        margin-right: 0
    }

    .app .wrapper .text_wrap {
        margin-left: 0;
        text-align: center;
        width: 100%;
        height: auto;
        display: block
    }

    .app .wrapper .text_wrap .center {
        display: block
    }

    .app .wrapper .text_wrap h2 {
        font-size: 24px
    }

    .app .wrapper .text_wrap h4 {
        font-size: 14px;
        line-height: 24px;
        margin: 7px 0 15px
    }

    .app .wrapper .downloads {
        text-align: center;
        margin: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .app .wrapper .downloads a {
        margin-right: 0;
        max-width: 45%
    }

    .app .wrapper .downloads a img {
        width: 100%;
        height: auto
    }

    .foot_btn_maincmp {
        margin: 20px 0
    }

    .foot_btn_maincmp .button {
        width: 90%
    }

    .footer-about-link {
        text-align: left
    }

    .footer .footer_wrap2 .record-number {
        margin-left: 0;
        text-align: left
    }

    .footer .footer_wrap2 .beian {
        margin-top: 10px
    }

    .communication-div {
        margin-left: 0;
        display: block;
        float: none
    }

    .footer_wrap2 .bottom-2 {
        padding: 0
    }

    .column.about.bottom-2 {
        margin-bottom: 30px
    }

    .footer .footer_wrap2 .column.bottom-1 {
        width: 100%
    }

    .footer .footer_wrap2 .column.bottom-1 .about-title {
        font-size: 18px;
        text-align: center
    }

    .footer .footer_wrap2 .column.bottom-1 .description {
        font-size: 12px
    }

    .footer .footer_wrap2 .column.bottom-2 {
        width: 100%;
        text-align: center
    }
}

.footers {
    font-size: 16px;
    color: #6d7378;
    max-width: 1280px;
    margin: 0 auto
}

.footers a {
    color: inherit
}

.footers-link {
    display: flex;
    padding: 32px 0 8px
}

.footers-link-wrap {
    margin-right: 20px
}

.footers-link-wrap a {
    display: inline-block;
    margin-right: 60px;
    margin-bottom: 24px;
    line-height: 1;
    transition: .3s
}

.footers-link-wrap a:hover {
    color: #222
}

.footers-link-dl {
    text-align: left;
    margin-right: 60px;
    position: relative
}

.footers-link-dl-popup {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    background: #fff;
    box-shadow: 0 2px 16px 0 rgba(0, 0, 0, .2);
    padding: 24px 40px;
    border-radius: 4px;
    display: none;
    z-index: 100
}

.footers-link-dl-popup h2 {
    text-align: center;
    font-size: 16px;
    color: #6d7378;
    margin: 0 0 8px;
    font-weight: 400
}

.footers-link-dl-popup img {
    width: 120px
}

.footers-link-dl p {
    font-size: 16px;
    margin: 0 0 12px
}

.footers-link-dl ul {
    display: flex;
    align-items: center
}

.footers-link-dl ul li {
    position: relative
}

.footers-link-dl ul li a {
    display: flex;
    height: 32px;
    border: 1px solid #6d7378;
    border-radius: 21px;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    font-size: 14px;
    margin-right: 6px;
    transition: .3s;
    white-space: nowrap
}

.footers-link-dl ul li a img {
    margin-right: 3px
}

.footers-link-dl ul li a:hover {
    border-color: #222;
    color: #222;
    background: #eeeff2
}

.footers-link-dl ul li a:hover+.footers-link-dl-popup {
    display: block
}

.footers-num {
    padding: 16px 0 24px;
    border-top: 1px solid #d7d8db;
    text-align: left;
    font-size: 0
}

.footers-num span {
    vertical-align: middle;
    font-size: 16px
}

.footers-num a {
    margin-left: 10px
}

.footers-num a img {
    vertical-align: middle;
    margin-right: 4px
}

.footers-num a:hover {
    color: #222
}

@media only screen and (max-width: 1280px) {
    .footers {
        max-width: auto;
        width: 100%;
        padding: 0 64px
    }

    .footers-link {
        flex-wrap: wrap;
        padding-bottom: 24px
    }

    .footers-link-wrap {
        width: 100%;
        text-align: left
    }

    .footers-link-dl {
        margin-top: 8px
    }
}

@media only screen and (max-width: 679px) {
    .footers {
        padding: 0 15px
    }

    .footers-link {
        display: block;
        padding: 24px 0
    }

    .footers-link-wrap {
        text-align: left;
        margin-bottom: 8px
    }

    .footers-link-wrap>div {
        display: flex;
        justify-content: space-between
    }

    .footers-link-wrap a {
        font-size: 14px;
        margin-right: 0;
        margin-bottom: 16px
    }

    .footers-link-dl:last-child p {
        margin-top: 16px
    }

    .footers-link-dl p {
        font-size: 14px;
        color: #6d7378;
        margin-bottom: 7px
    }

    .footers-num {
        font-size: 14px
    }
}

/*! Hint.css - v2.4.1 - 2016-11-08
* http://kushagragour.in/lab/hint/
* Copyright (c) 2016 Kushagra Gour */
[class*=hint--] {
    position: relative;
    display: inline-block
}

[class*=hint--]:after,
[class*=hint--]:before {
    position: absolute;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
    visibility: hidden;
    opacity: 0;
    z-index: 1000000;
    pointer-events: none;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    transition: .3s ease;
    -webkit-transition-delay: 0ms;
    -moz-transition-delay: 0ms;
    transition-delay: 0ms
}

[class*=hint--]:hover:after,
[class*=hint--]:hover:before {
    visibility: visible;
    opacity: 1;
    -webkit-transition-delay: .1s;
    -moz-transition-delay: .1s;
    transition-delay: .1s
}

[class*=hint--]:before {
    content: "";
    position: absolute;
    background: transparent;
    border: 6px solid transparent;
    z-index: 1000001
}

[class*=hint--]:after {
    background: #383838;
    color: #fff;
    padding: 8px 10px;
    font-size: 12px;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    line-height: 12px;
    white-space: nowrap
}

[class*=hint--][aria-label]:after {
    content: attr(aria-label)
}

[class*=hint--][data-hint]:after {
    content: attr(data-hint)
}

[aria-label=""]:after,
[aria-label=""]:before,
[data-hint=""]:after,
[data-hint=""]:before {
    display: none !important
}

.hint--top-left:before,
.hint--top-right:before,
.hint--top:before {
    border-top-color: #383838
}

.hint--bottom-left:before,
.hint--bottom-right:before,
.hint--bottom:before {
    border-bottom-color: #383838
}

.hint--left:before {
    border-left-color: #383838
}

.hint--right:before {
    border-right-color: #383838
}

.hint--top:before {
    margin-bottom: -11px
}

.hint--top:after,
.hint--top:before {
    bottom: 100%;
    left: 50%
}

.hint--top:before {
    left: calc(50% - 6px)
}

.hint--top:after {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%)
}

.hint--top:hover:before {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    transform: translateY(-8px)
}

.hint--top:hover:after {
    -webkit-transform: translateX(-50%) translateY(-8px);
    -moz-transform: translateX(-50%) translateY(-8px);
    transform: translateX(-50%) translateY(-8px)
}

.hint--bottom:before {
    margin-top: -11px
}

.hint--bottom:after,
.hint--bottom:before {
    top: 100%;
    left: 50%
}

.hint--bottom:before {
    left: calc(50% - 6px)
}

.hint--bottom:after {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%)
}

.hint--bottom:hover:before {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    transform: translateY(8px)
}

.hint--bottom:hover:after {
    -webkit-transform: translateX(-50%) translateY(8px);
    -moz-transform: translateX(-50%) translateY(8px);
    transform: translateX(-50%) translateY(8px)
}

.hint--right:before {
    margin-left: -11px;
    margin-bottom: -6px
}

.hint--right:after {
    margin-bottom: -14px
}

.hint--right:after,
.hint--right:before {
    left: 100%;
    bottom: 50%
}

.hint--right:hover:after,
.hint--right:hover:before {
    -webkit-transform: translateX(8px);
    -moz-transform: translateX(8px);
    transform: translateX(8px)
}

.hint--left:before {
    margin-right: -11px;
    margin-bottom: -6px
}

.hint--left:after {
    margin-bottom: -14px
}

.hint--left:after,
.hint--left:before {
    right: 100%;
    bottom: 50%
}

.hint--left:hover:after,
.hint--left:hover:before {
    -webkit-transform: translateX(-8px);
    -moz-transform: translateX(-8px);
    transform: translateX(-8px)
}

.hint--top-left:before {
    margin-bottom: -11px
}

.hint--top-left:after,
.hint--top-left:before {
    bottom: 100%;
    left: 50%
}

.hint--top-left:before {
    left: calc(50% - 6px)
}

.hint--top-left:after {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    transform: translateX(-100%);
    margin-left: 12px
}

.hint--top-left:hover:before {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    transform: translateY(-8px)
}

.hint--top-left:hover:after {
    -webkit-transform: translateX(-100%) translateY(-8px);
    -moz-transform: translateX(-100%) translateY(-8px);
    transform: translateX(-100%) translateY(-8px)
}

.hint--top-right:before {
    margin-bottom: -11px
}

.hint--top-right:after,
.hint--top-right:before {
    bottom: 100%;
    left: 50%
}

.hint--top-right:before {
    left: calc(50% - 6px)
}

.hint--top-right:after {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
    margin-left: -12px
}

.hint--top-right:hover:after,
.hint--top-right:hover:before {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    transform: translateY(-8px)
}

.hint--bottom-left:before {
    margin-top: -11px
}

.hint--bottom-left:after,
.hint--bottom-left:before {
    top: 100%;
    left: 50%
}

.hint--bottom-left:before {
    left: calc(50% - 6px)
}

.hint--bottom-left:after {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    transform: translateX(-100%);
    margin-left: 12px
}

.hint--bottom-left:hover:before {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    transform: translateY(8px)
}

.hint--bottom-left:hover:after {
    -webkit-transform: translateX(-100%) translateY(8px);
    -moz-transform: translateX(-100%) translateY(8px);
    transform: translateX(-100%) translateY(8px)
}

.hint--bottom-right:before {
    margin-top: -11px
}

.hint--bottom-right:after,
.hint--bottom-right:before {
    top: 100%;
    left: 50%
}

.hint--bottom-right:before {
    left: calc(50% - 6px)
}

.hint--bottom-right:after {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
    margin-left: -12px
}

.hint--bottom-right:hover:after,
.hint--bottom-right:hover:before {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    transform: translateY(8px)
}

.hint--large:after,
.hint--medium:after,
.hint--small:after {
    white-space: normal;
    line-height: 1.4em;
    word-wrap: break-word
}

.hint--small:after {
    width: 80px
}

.hint--medium:after {
    width: 150px
}

.hint--large:after {
    width: 300px
}

[class*=hint--]:after {
    text-shadow: 0 -1px 0 #000;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, .3)
}

.hint--error:after {
    background-color: #b34e4d;
    text-shadow: 0 -1px 0 #592726
}

.hint--error.hint--top-left:before,
.hint--error.hint--top-right:before,
.hint--error.hint--top:before {
    border-top-color: #b34e4d
}

.hint--error.hint--bottom-left:before,
.hint--error.hint--bottom-right:before,
.hint--error.hint--bottom:before {
    border-bottom-color: #b34e4d
}

.hint--error.hint--left:before {
    border-left-color: #b34e4d
}

.hint--error.hint--right:before {
    border-right-color: #b34e4d
}

.hint--warning:after {
    background-color: #c09854;
    text-shadow: 0 -1px 0 #6c5328
}

.hint--warning.hint--top-left:before,
.hint--warning.hint--top-right:before,
.hint--warning.hint--top:before {
    border-top-color: #c09854
}

.hint--warning.hint--bottom-left:before,
.hint--warning.hint--bottom-right:before,
.hint--warning.hint--bottom:before {
    border-bottom-color: #c09854
}

.hint--warning.hint--left:before {
    border-left-color: #c09854
}

.hint--warning.hint--right:before {
    border-right-color: #c09854
}

.hint--info:after {
    background-color: #3986ac;
    text-shadow: 0 -1px 0 #1a3c4d
}

.hint--info.hint--top-left:before,
.hint--info.hint--top-right:before,
.hint--info.hint--top:before {
    border-top-color: #3986ac
}

.hint--info.hint--bottom-left:before,
.hint--info.hint--bottom-right:before,
.hint--info.hint--bottom:before {
    border-bottom-color: #3986ac
}

.hint--info.hint--left:before {
    border-left-color: #3986ac
}

.hint--info.hint--right:before {
    border-right-color: #3986ac
}

.hint--success:after {
    background-color: #458746;
    text-shadow: 0 -1px 0 #1a321a
}

.hint--success.hint--top-left:before,
.hint--success.hint--top-right:before,
.hint--success.hint--top:before {
    border-top-color: #458746
}

.hint--success.hint--bottom-left:before,
.hint--success.hint--bottom-right:before,
.hint--success.hint--bottom:before {
    border-bottom-color: #458746
}

.hint--success.hint--left:before {
    border-left-color: #458746
}

.hint--success.hint--right:before {
    border-right-color: #458746
}

.hint--always:after,
.hint--always:before {
    opacity: 1;
    visibility: visible
}

.hint--always.hint--top:before {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    transform: translateY(-8px)
}

.hint--always.hint--top:after {
    -webkit-transform: translateX(-50%) translateY(-8px);
    -moz-transform: translateX(-50%) translateY(-8px);
    transform: translateX(-50%) translateY(-8px)
}

.hint--always.hint--top-left:before {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    transform: translateY(-8px)
}

.hint--always.hint--top-left:after {
    -webkit-transform: translateX(-100%) translateY(-8px);
    -moz-transform: translateX(-100%) translateY(-8px);
    transform: translateX(-100%) translateY(-8px)
}

.hint--always.hint--top-right:after,
.hint--always.hint--top-right:before {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    transform: translateY(-8px)
}

.hint--always.hint--bottom:before {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    transform: translateY(8px)
}

.hint--always.hint--bottom:after {
    -webkit-transform: translateX(-50%) translateY(8px);
    -moz-transform: translateX(-50%) translateY(8px);
    transform: translateX(-50%) translateY(8px)
}

.hint--always.hint--bottom-left:before {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    transform: translateY(8px)
}

.hint--always.hint--bottom-left:after {
    -webkit-transform: translateX(-100%) translateY(8px);
    -moz-transform: translateX(-100%) translateY(8px);
    transform: translateX(-100%) translateY(8px)
}

.hint--always.hint--bottom-right:after,
.hint--always.hint--bottom-right:before {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    transform: translateY(8px)
}

.hint--always.hint--left:after,
.hint--always.hint--left:before {
    -webkit-transform: translateX(-8px);
    -moz-transform: translateX(-8px);
    transform: translateX(-8px)
}

.hint--always.hint--right:after,
.hint--always.hint--right:before {
    -webkit-transform: translateX(8px);
    -moz-transform: translateX(8px);
    transform: translateX(8px)
}

.hint--rounded:after {
    border-radius: 4px
}

.hint--no-animate:after,
.hint--no-animate:before {
    -webkit-transition-duration: 0ms;
    -moz-transition-duration: 0ms;
    transition-duration: 0ms
}

.hint--bounce:after,
.hint--bounce:before {
    -webkit-transition: opacity .3s ease, visibility .3s ease, -webkit-transform .3s cubic-bezier(.71, 1.7, .77, 1.24);
    -moz-transition: opacity .3s ease, visibility .3s ease, -moz-transform .3s cubic-bezier(.71, 1.7, .77, 1.24);
    transition: opacity .3s ease, visibility .3s ease, transform .3s cubic-bezier(.71, 1.7, .77, 1.24)
}

@-webkit-keyframes heart_animation {
    0% {
        opacity: 0;
        -webkit-transform: matrix(.3, 0, 0, .3, 0, 0);
        transform: matrix(.3, 0, 0, .3, 0, 0)
    }

    3.4% {
        -webkit-transform: matrix(.585, 0, 0, .585, 0, 0);
        transform: matrix(.585, 0, 0, .585, 0, 0)
    }

    6.81% {
        opacity: .5;
        -webkit-transform: matrix(.925, 0, 0, .925, 0, 0);
        transform: matrix(.925, 0, 0, .925, 0, 0)
    }

    10.21% {
        -webkit-transform: matrix(1.158, 0, 0, 1.158, 0, 0);
        transform: matrix(1.158, 0, 0, 1.158, 0, 0)
    }

    13.61% {
        -webkit-transform: matrix(1.233, 0, 0, 1.233, 0, 0);
        transform: matrix(1.233, 0, 0, 1.233, 0, 0)
    }

    17.52% {
        -webkit-transform: matrix(1.168, 0, 0, 1.168, 0, 0);
        transform: matrix(1.168, 0, 0, 1.168, 0, 0)
    }

    21.32% {
        -webkit-transform: matrix(1.049, 0, 0, 1.049, 0, 0);
        transform: matrix(1.049, 0, 0, 1.049, 0, 0)
    }

    25.23% {
        opacity: 1;
        -webkit-transform: matrix(.956, 0, 0, .956, 0, 0);
        transform: matrix(.956, 0, 0, .956, 0, 0)
    }

    29.03% {
        -webkit-transform: matrix(.928, 0, 0, .928, 0, 0);
        transform: matrix(.928, 0, 0, .928, 0, 0)
    }

    36.74% {
        -webkit-transform: matrix(.985, 0, 0, .985, 0, 0);
        transform: matrix(.985, 0, 0, .985, 0, 0)
    }

    44.44% {
        -webkit-transform: matrix(1.022, 0, 0, 1.022, 0, 0);
        transform: matrix(1.022, 0, 0, 1.022, 0, 0)
    }

    59.86% {
        -webkit-transform: matrix(.993, 0, 0, .993, 0, 0);
        transform: matrix(.993, 0, 0, .993, 0, 0)
    }

    75.28% {
        -webkit-transform: matrix(1.002, 0, 0, 1.002, 0, 0);
        transform: matrix(1.002, 0, 0, 1.002, 0, 0)
    }

    90.69% {
        -webkit-transform: matrix(.999, 0, 0, .999, 0, 0);
        transform: matrix(.999, 0, 0, .999, 0, 0)
    }

    to {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0)
    }
}

@-moz-keyframes heart_animation {
    0% {
        opacity: 0;
        -moz-transform: matrix(.3, 0, 0, .3, 0, 0);
        transform: matrix(.3, 0, 0, .3, 0, 0)
    }

    3.4% {
        -moz-transform: matrix(.585, 0, 0, .585, 0, 0);
        transform: matrix(.585, 0, 0, .585, 0, 0)
    }

    6.81% {
        opacity: .5;
        -moz-transform: matrix(.925, 0, 0, .925, 0, 0);
        transform: matrix(.925, 0, 0, .925, 0, 0)
    }

    10.21% {
        -moz-transform: matrix(1.158, 0, 0, 1.158, 0, 0);
        transform: matrix(1.158, 0, 0, 1.158, 0, 0)
    }

    13.61% {
        -moz-transform: matrix(1.233, 0, 0, 1.233, 0, 0);
        transform: matrix(1.233, 0, 0, 1.233, 0, 0)
    }

    17.52% {
        -moz-transform: matrix(1.168, 0, 0, 1.168, 0, 0);
        transform: matrix(1.168, 0, 0, 1.168, 0, 0)
    }

    21.32% {
        -moz-transform: matrix(1.049, 0, 0, 1.049, 0, 0);
        transform: matrix(1.049, 0, 0, 1.049, 0, 0)
    }

    25.23% {
        opacity: 1;
        -moz-transform: matrix(.956, 0, 0, .956, 0, 0);
        transform: matrix(.956, 0, 0, .956, 0, 0)
    }

    29.03% {
        -moz-transform: matrix(.928, 0, 0, .928, 0, 0);
        transform: matrix(.928, 0, 0, .928, 0, 0)
    }

    36.74% {
        -moz-transform: matrix(.985, 0, 0, .985, 0, 0);
        transform: matrix(.985, 0, 0, .985, 0, 0)
    }

    44.44% {
        -moz-transform: matrix(1.022, 0, 0, 1.022, 0, 0);
        transform: matrix(1.022, 0, 0, 1.022, 0, 0)
    }

    59.86% {
        -moz-transform: matrix(.993, 0, 0, .993, 0, 0);
        transform: matrix(.993, 0, 0, .993, 0, 0)
    }

    75.28% {
        -moz-transform: matrix(1.002, 0, 0, 1.002, 0, 0);
        transform: matrix(1.002, 0, 0, 1.002, 0, 0)
    }

    90.69% {
        -moz-transform: matrix(.999, 0, 0, .999, 0, 0);
        transform: matrix(.999, 0, 0, .999, 0, 0)
    }

    to {
        -moz-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0)
    }
}

@keyframes heart_animation {
    0% {
        opacity: 0;
        -webkit-transform: matrix(.3, 0, 0, .3, 0, 0);
        -moz-transform: matrix(.3, 0, 0, .3, 0, 0);
        -ms-transform: matrix(.3, 0, 0, .3, 0, 0);
        transform: matrix(.3, 0, 0, .3, 0, 0)
    }

    3.4% {
        -webkit-transform: matrix(.585, 0, 0, .585, 0, 0);
        -moz-transform: matrix(.585, 0, 0, .585, 0, 0);
        -ms-transform: matrix(.585, 0, 0, .585, 0, 0);
        transform: matrix(.585, 0, 0, .585, 0, 0)
    }

    6.81% {
        opacity: .5;
        -webkit-transform: matrix(.925, 0, 0, .925, 0, 0);
        -moz-transform: matrix(.925, 0, 0, .925, 0, 0);
        -ms-transform: matrix(.925, 0, 0, .925, 0, 0);
        transform: matrix(.925, 0, 0, .925, 0, 0)
    }

    10.21% {
        -webkit-transform: matrix(1.158, 0, 0, 1.158, 0, 0);
        -moz-transform: matrix(1.158, 0, 0, 1.158, 0, 0);
        -ms-transform: matrix(1.158, 0, 0, 1.158, 0, 0);
        transform: matrix(1.158, 0, 0, 1.158, 0, 0)
    }

    13.61% {
        -webkit-transform: matrix(1.233, 0, 0, 1.233, 0, 0);
        -moz-transform: matrix(1.233, 0, 0, 1.233, 0, 0);
        -ms-transform: matrix(1.233, 0, 0, 1.233, 0, 0);
        transform: matrix(1.233, 0, 0, 1.233, 0, 0)
    }

    17.52% {
        -webkit-transform: matrix(1.168, 0, 0, 1.168, 0, 0);
        -moz-transform: matrix(1.168, 0, 0, 1.168, 0, 0);
        -ms-transform: matrix(1.168, 0, 0, 1.168, 0, 0);
        transform: matrix(1.168, 0, 0, 1.168, 0, 0)
    }

    21.32% {
        -webkit-transform: matrix(1.049, 0, 0, 1.049, 0, 0);
        -moz-transform: matrix(1.049, 0, 0, 1.049, 0, 0);
        -ms-transform: matrix(1.049, 0, 0, 1.049, 0, 0);
        transform: matrix(1.049, 0, 0, 1.049, 0, 0)
    }

    25.23% {
        opacity: 1;
        -webkit-transform: matrix(.956, 0, 0, .956, 0, 0);
        -moz-transform: matrix(.956, 0, 0, .956, 0, 0);
        -ms-transform: matrix(.956, 0, 0, .956, 0, 0);
        transform: matrix(.956, 0, 0, .956, 0, 0)
    }

    29.03% {
        -webkit-transform: matrix(.928, 0, 0, .928, 0, 0);
        -moz-transform: matrix(.928, 0, 0, .928, 0, 0);
        -ms-transform: matrix(.928, 0, 0, .928, 0, 0);
        transform: matrix(.928, 0, 0, .928, 0, 0)
    }

    36.74% {
        -webkit-transform: matrix(.985, 0, 0, .985, 0, 0);
        -moz-transform: matrix(.985, 0, 0, .985, 0, 0);
        -ms-transform: matrix(.985, 0, 0, .985, 0, 0);
        transform: matrix(.985, 0, 0, .985, 0, 0)
    }

    44.44% {
        -webkit-transform: matrix(1.022, 0, 0, 1.022, 0, 0);
        -moz-transform: matrix(1.022, 0, 0, 1.022, 0, 0);
        -ms-transform: matrix(1.022, 0, 0, 1.022, 0, 0);
        transform: matrix(1.022, 0, 0, 1.022, 0, 0)
    }

    59.86% {
        -webkit-transform: matrix(.993, 0, 0, .993, 0, 0);
        -moz-transform: matrix(.993, 0, 0, .993, 0, 0);
        -ms-transform: matrix(.993, 0, 0, .993, 0, 0);
        transform: matrix(.993, 0, 0, .993, 0, 0)
    }

    75.28% {
        -webkit-transform: matrix(1.002, 0, 0, 1.002, 0, 0);
        -moz-transform: matrix(1.002, 0, 0, 1.002, 0, 0);
        -ms-transform: matrix(1.002, 0, 0, 1.002, 0, 0);
        transform: matrix(1.002, 0, 0, 1.002, 0, 0)
    }

    90.69% {
        -webkit-transform: matrix(.999, 0, 0, .999, 0, 0);
        -moz-transform: matrix(.999, 0, 0, .999, 0, 0);
        -ms-transform: matrix(.999, 0, 0, .999, 0, 0);
        transform: matrix(.999, 0, 0, .999, 0, 0)
    }

    to {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        -moz-transform: matrix(1, 0, 0, 1, 0, 0);
        -ms-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0)
    }
}

.msg_window .msg {
    margin: 0 auto;
    font-size: 16px;
    line-height: 18px;
    color: #fff;
    box-shadow: none !important;
    top: -50px;
    width: 90% !important;
    position: fixed;
    background: #0099e5;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    overflow: hidden;
    border-top: none;
    padding: 16px;
    z-index: 99999;
    transition: top .6s ease-out;
    -webkit-transition: top .6s ease-out;
    -ms-transition: top .6s ease-out;
    -moz-transition: top .6s ease-out;
    -o-transition: top .6s ease-out;
    left: 5%
}

.msg_window .msg .inside {
    min-height: 24px;
    line-height: 24px;
    padding-left: 40px;
    overflow: hidden;
    background: transparent url() 0 no-repeat
}

.msg_window .msg.warning {
    background-color: #222;
    -webkit-background-clip: padding-box;
    background-clip: padding-box
}

.msg_window .msg.warning .inside {
    background: transparent url() 0 no-repeat
}

.msg_window .msg.error {
    background-color: #222;
    -webkit-background-clip: padding-box;
    background-clip: padding-box
}

.msg_window .msg.error .inside {
    background: transparent url() 0 no-repeat
}

.msg_window .msg.success {
    background-color: #222;
    -webkit-background-clip: padding-box;
    background-clip: padding-box
}

.msg_window .msg.success .inside {
    background: transparent url() 0 no-repeat
}

.msg_window .msg .close {
    padding: 0;
    margin: 0;
    color: rgba(0, 0, 0, .3);
    display: none
}

.msg_window .msg .close_x {
    cursor: pointer;
    width: 16px;
    height: 16px;
    position: absolute;
    right: 8px;
    top: 8px;
    background: transparent url() top no-repeat
}

@media only screen and (max-width: 679px) {
    .msg_window .msg {
        width: 100% !important;
        left: 0
    }
}

html {
    background: #f7f8fa;
    font-family: Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 131.25%
}

html.pxLightbox {
    overflow: hidden !important;
    height: 100%
}

@media only screen and (max-width: 1379px) {
    html {
        font-size: 112.5%
    }
}

@media only screen and (max-width: 1179px) {
    html {
        font-size: 93.75%
    }
}

@media only screen and (max-width: 679px) {
    html {
        font-size: 75%
    }
}

html.windows,
html.windows body {
    font-family: Helvetica Neue, HelveticaNeue, Helvetica, TeXGyreHeros, FreeSans, Nimbus Sans L, Liberation Sans, Microsoft YaHei, Arial, sans-serif
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    font-size: .57143rem
}

body,
body ul {
    margin: 0;
    padding: 0
}

body ul li {
    list-style: none
}

body .seo_h1_none {
    width: 0;
    height: 0;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

a {
    text-decoration: none;
    outline: 0
}

input,
select,
textarea {
    font-family: inherit;
    font-weight: inherit;
    outline-style: none;
    outline-width: 0;
    line-height: normal;
    transition: border-color .2s ease-out 0s;
    -webkit-transition: border-color .2s ease-out 0s;
    -mos-transition: border-color .2s ease-out 0s;
    -o-transition: border-color .2s ease-out 0s
}

.flexbox {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

.flex {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.left {
    float: left
}

.right {
    float: right
}

.clearfix:after {
    content: " ";
    display: block;
    clear: both;
    height: 0
}

.hidden {
    display: none !important
}

.vHidden {
    visibility: hidden
}

.px_topnav__link_text {
    -webkit-transition: opacity .2s ease-out, color .2s ease-out;
    -moz-transition: opacity .2s ease-out, color .2s ease-out;
    transition: opacity .2s ease-out, color .2s ease-out
}

.webuploader-container input {
    display: none
}

select.select-common {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

input {
    font-size: 14px;
    padding: 8px 10px;
    color: #525558;
    border: 1px solid rgba(185, 193, 199, .5);
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: border-color .2s;
    -moz-transition: border-color .2s;
    transition: border-color .2s;
    resize: none;
    line-height: 1.4em
}

input:-moz-placeholder,
input::-moz-placeholder {
    color: #b9c1c7
}

input:-ms-input-placeholder {
    color: #b9c1c7
}

input::-webkit-input-placeholder {
    color: #b9c1c7
}

input:focus {
    border-color: #0099e5
}

input:read-only:focus {
    border-color: rgba(185, 193, 199, .5)
}

#YSF-BTN-HOLDER {
    right: 10px !important;
    bottom: 45px !important;
    width: 68px !important;
    height: 68px !important
}

#YSF-BTN-HOLDER #YSF-CUSTOM-ENTRY-0 {
    border-radius: 50%;
    background-color: #0870d1
}

#YSF-BTN-HOLDER img {
    max-width: 100% !important
}

.scroll_to_top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    cursor: pointer;
    z-index: 999
}

.scroll_to_top:hover svg path {
    fill: #f36478
}

.scroll_to_top.display {
    display: block
}

@media only screen and (max-width: 679px) {

    .instructions_contest .weibo,
    .instructions_contest .weixin {
        float: none
    }

    .instructions_contest .mobile_show {
        display: block !important
    }

    .scroll_to_top {
        width: 30px;
        right: 15px
    }

    .scroll_to_top svg {
        width: 30px
    }
}

@media (min-device-width: 320px) and (max-device-width:568px),
only screen and (min-device-width:768px) and (max-device-width:1024px) {
    * {
        -webkit-overflow-scrolling: touch
    }
}


.daohanpos {
    position: absolute;
    left: 200px;
    top: 25px;
}

.daohang_font {
    line-height: 30px;
    color: #222222;
    font-family: Microsoft YaHei;
    font-size: 20px;
    font-weight: 400;
    position: relative;
    left: 60px;
    padding: 10px;
    text-decoration: none;
}

.daohang_font:link {
    color: #222222;
    font-family: Microsoft YaHei;
    font-size: 20px;
    font-weight: 400;
    position: relative;
    left: 60px;
    padding: 10px;
    text-decoration: none;
}

.daohang_font:visited {
    color: #222222;
    font-family: Microsoft YaHei;
    font-size: 20px;
    font-weight: 400;
    position: relative;
    left: 60px;
    padding: 10px;
    text-decoration: none;
}

.daohang_font:hover {
    color: cornflowerblue;
}

.daohang_font:active {
    color: cornflowerblue;
    font-family: Microsoft YaHei;
    font-size: 20px;
    font-weight: 400;
    position: relative;
    left: 60px;
    padding: 10px;
    text-decoration: none;
}

.daohang_font1 {
    color: #222222;
    font-family: Microsoft YaHei;
    font-size: 20px;
    font-weight: 400;
    position: relative;
    left: 70px;
    padding: 10px;
    text-decoration: none;
}

.daohang_font1:link {
    color: #222222;
    font-family: Microsoft YaHei;
    font-size: 20px;
    font-weight: 400;
    position: relative;
    left: 70px;
    padding: 10px;
    text-decoration: none;
}

.daohang_font1:visited {
    color: #222222;
    font-family: Microsoft YaHei;
    font-size: 20px;
    font-weight: 400;
    position: relative;
    left: 70px;
    padding: 10px;
    text-decoration: none;
}

.daohang_font1:hover {
    color: cornflowerblue;
}

.daohang_font1:active {
    color: cornflowerblue;
    font-family: Microsoft YaHei;
    font-size: 20px;
    font-weight: 400;
    position: relative;
    left: 70px;
    padding: 10px;
    text-decoration: none;
}

.fangkuang {
    display: none;
    position: absolute;
    top: 60px;
    left: 380px;
    width: 90px;
    height: 200px;
    border: solid 2px black;
}